Fehler beim Ausführen von 'postMessage' in 'DOMWindow': https://www.youtube.com! == http: // localhost: 9000

Dies ist die Fehlermeldung, die ich erhalte:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://www.youtube.com') does not match the recipient window's origin 
('http://localhost:9000').

Ich habe andere ähnliche Probleme gesehen, bei denen der Zielursprung http://www.youtube.comund der Empfängerursprung liegen https://www.youtube.com, aber keine wie meine, bei denen das Ziel https://www.youtube.comund der Ursprung liegen http://localhost:9000.

1. Ich verstehe das Problem nicht. Was ist das Problem?
2. Wie kann ich es reparieren?

Ich glaube, dies ist ein Problem mit dem Zielursprung https. Ich vermute, es liegt daran, dass Ihre iFrame-URL httpanstelle von verwendet https. Versuchen Sie, die URL der Datei, in die Sie einbetten möchten, zu ändern https.

Zum Beispiel:

'//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

sein:

'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

Fügen Sie einfach den Parameter "origin"mit der URL Ihrer Site in das paramVarsAttribut des Players ein:

this.player = new window['YT'].Player('player', {
    videoId: this.mediaid,
    width:'100%',
    playerVars: { 'autoplay': 1, 'controls': 0,'autohide':1,'wmode':'opaque','origin':'http://localhost:8100' },
}

Das Einstellen scheint dies zu beheben:

  this$1.player = new YouTube.Player(this$1.elementId, {
    videoId: videoId,
    host: 'https://www.youtube.com',

Sie können das JavaScript in lokalen Dateien speichern:

• https://www.youtube.com/player_api
• https://s.ytimg.com/yts/jsbin/www-widgetapi-vfluxKqfs/www-widgetapi.js

Fügen Sie in die erste Datei player_apidiesen Code ein:

if(!window.YT)var YT={loading:0,loaded:0};if(!window.YTConfig)var YTConfig={host:"https://www.youtube.com"};YT.loading||(YT.loading=1,function(){var o=[];YT.ready=function(n){YT.loaded?n():o.push(n)},window.onYTReady=function(){YT.loaded=1;for(var n=0;n<o.length;n++)try{o[n]()}catch(i){}},YT.setConfig=function(o){for(var n in o)o.hasOwnProperty(n)&&(YTConfig[n]=o[n])}}());

Suchen Sie in der zweiten Datei den Code: this.a.contentWindow.postMessage(a,b[c]);

und ersetzen Sie es durch:

if(this._skiped){
    this.a.contentWindow.postMessage(a,b[c]); 
}
this._skiped = true;

Natürlich können Sie zu einer Datei verketten - wird effizienter. Dies ist keine perfekte Lösung, aber es funktioniert!

Meine Quelle: yt_api-concat

Stellen Sie sicher, dass Sie von einer URL laden, z.

https://www.youtube.com/embed/HIbAz29L-FA?modestbranding=1&playsinline=0&showinfo=0&enablejsapi=1&origin=https%3A%2F%2Fintercoin.org&widgetid=1

Beachten Sie die Komponente "Ursprung" sowie "enablejsapi = 1". Der Ursprung muss mit Ihrer Domain übereinstimmen. Dann wird er auf die Whitelist gesetzt und funktioniert.

Versuchen Sie, window.location.hrefdie URL so zu verwenden, dass sie mit dem Ursprung des Fensters übereinstimmt.

Ich habe den gleichen Fehler bekommen. Mein Fehler war, dass der enablejsapi=1Parameter im iframesrc nicht vorhanden war .

Ich denke, die Beschreibung des Fehlers ist irreführend und hat ursprünglich mit einer falschen Verwendung des Player-Objekts zu tun.

Ich hatte das gleiche Problem beim Umschalten auf neue Videos in einem Slider.

Wenn Sie einfach die hier beschriebeneplayer.destroy() Funktion verwenden , ist das Problem behoben.

Ich hatte das gleiche Problem und es stellte sich heraus, dass die Chrome-Erweiterung "HTTPS Everywhere" ausgeführt wurde. Das Deaktivieren der Erweiterung hat mein Problem gelöst.

Dieser genaue Fehler bezog sich auf einen Inhaltsblock von Youtube bei der "Wiedergabe auf bestimmten Websites oder Anwendungen". Insbesondere von WMG (Warner Music Group).

Die Fehlermeldung deutete jedoch darauf hin, dass ein https-Iframe-Import auf eine http-Site das Problem war, was in diesem Fall nicht der Fall war.

Entfernen Sie DNS Prefetch, um dieses Problem zu beheben.

Wenn Sie WordPress verwenden, fügen Sie diese Zeile in die functions.php Ihres Themas ein

remove_action( 'wp_head', 'wp_resource_hints', 2 );

Sie können Ihren Iframe so ändern und den Ursprung zu Ihrer aktuellen Website hinzufügen. Es behebt Fehler in meinem Browser.

<iframe class="test-testimonials-youtube-group"  type="text/html" width="100%" height="100%"
  src="http://www.youtube.com/embed/HiIsKeXN7qg?enablejsapi=1&origin=http://localhost:8000"
  frameborder="0">
</div>

ref: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Es kann eine der folgenden Möglichkeiten geben, aber alle führen in ein DOM, das nicht geladen wurde, bevor das Javascript darauf zugreift.

Folgendes müssen Sie also sicherstellen, bevor Sie JS-Code aufrufen: * Stellen Sie sicher, dass der Container geladen wurde, bevor Javascript aufgerufen wird. * Stellen Sie sicher, dass die Ziel-URL in den gewünschten Container geladen ist

Ich bin auf ein ähnliches Problem gestoßen, aber auf meinem lokalen, als ich versuche, mein Javascript lange vor dem Laden der Hauptseite auszuführen, was die Fehlermeldung verursacht. Ich habe es behoben, indem ich einfach darauf gewartet habe, dass die ganze Seite geladen wird, und dann die gewünschte Funktion aufgerufen habe.

Sie können dies einfach tun, indem Sie eine Timeout-Funktion hinzufügen, wenn die Seite geladen wurde, und Ihr Onload-Ereignis wie folgt aufrufen:

window.onload = new function () {setTimeout (function () {// ein Onload-Ereignis}, 10); }}

Dadurch wird sichergestellt, dass das, was Sie versuchen, nach dem Auslösen von onLoad gut ausgeführt wird.

Sie erhalten diese Meldung auch, wenn Sie in Aufrufen von kein targetOrigin angeben window.postMessage().

In diesem Beispiel senden wir eine Nachricht an den ersten iFrame und verwenden sie *als Ziel, wodurch die Kommunikation mit jedem targetOrigin ermöglicht werden soll.

window.frames[0].postMessage({
                    message : "Hi there",
                    command :"hi-there-command",
                    data : "Some Data"
                }, '*')

Zumindest in meinem Fall scheint dies eine harmlose "nicht bereit" Bedingung zu sein, die die API wiederholt, bis sie erfolgreich ist.

Ich bekomme zwischen zwei und neun davon (auf meinem Worst-Case-Tester, einem 2009er FossilBook mit 20 Registerkarten, die über einen Mobilfunk-Hotspot geöffnet sind) ... aber dann funktioniert das Video ordnungsgemäß. Sobald meine postMessage-basierten Aufrufe ausgeführt werden, um zu suchen, dass sie definitiv funktionieren, haben Sie andere nicht getestet.

In einigen Fällen (wie ein Kommentator erwähnte) kann dies verursacht werden, wenn Sie den Player innerhalb von DOM bewegen, wie appendoder etc ..

Du kannst es versuchen :

document.getElementById('your_id_iframe').contentWindow.postMessage('your_message', 'your_domain_iframe')

Ich hatte auch das gleiche Problem, als ich die offizielle Youtube Iframe Api besuchte, wo ich Folgendes fand:

Der Browser des Benutzers muss die HTML5-Funktion postMessage unterstützen. Die meisten modernen Browser unterstützen postMessage

und wandern Sie, um zu sehen, dass die offizielle Seite ebenfalls mit diesem Problem konfrontiert war. Besuchen Sie einfach die offizielle Youtube Iframe-API und sehen Sie sich die Konsolenprotokolle an. Meine Chrome-Version ist 79.0.3945.88.

meins war:

<youtube-player
  [videoId]="'paxSz8UblDs'"
  [playerVars]="playerVars"
  [width]="291"
  [height]="194">
</youtube-player>

Ich habe gerade die Leitung mit playerVars entfernt und es hat ohne Fehler auf der Konsole funktioniert.