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


165

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?


4
Ich hatte das gleiche Problem und das unten stehende Update von @ChrisFranklin hat es für mich behoben. aber was seltsam ist, dass ich bei meinem Problem nur etwa die Hälfte der Zeit den Fehler bekommen würde und selbst dann das Video noch geladen würde (obwohl andere Dinge kaputt gehen würden).
dgo

1
@dgo das gleiche Problem, es war zufällig beim Laden der Seite. Es stellt sich heraus (ich denke), dass der eigentliche iframe-Inhalt nicht vollständig fertig ist, wenn etwas anderes versucht, eine postMessage zu erstellen. Es ist also eine Rennbedingung. Und wenn die postMessage zu einem späteren Zeitpunkt erfolgt (Benutzeraktion), funktioniert sie ohne Fehler einwandfrei.
IncredibleHat

Sogar Google hat diesen Fehler selbst - öffnen Sie die Konsole und spielen Sie das Video hier ab: developer.google.com/youtube/iframe_api_reference
T.Todua

Antworten:


92

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';

2
Das scheint funktioniert zu haben. Vielen Dank! Das Problem ist also httpgegenüber https? Ist es egal, dass sich die Domains unterscheiden (youtube vs. localhost)? Und was genau ist Zielursprung vs. Empfängerursprung? Wie hat das, was Sie gesagt haben, die Herkunft des Empfängers geändert (meine URL ist immer noch localhost: 9000)?
Adam Zerner

30
Der Fehler ist etwas irreführend. Es hat eigentlich nichts damit zu tun, dass du dran bist localhost:9000. Das Problem lag tatsächlich in der Art und Weise, wie Sie die YouTube-API verwendet haben. Wenn du die API wie tag.src = "https://www.youtube.com/iframe_api";in deinem Code deklarierst , sagst du youtube, dass du ssl verwenden möchtest. Die von mir vorgeschlagene Änderung hat Sie dazu veranlasst, ssl zum Anfordern der Videos zu verwenden. Der Fehler bestand nur darin, dass Sie SSL- und Nicht-SSL-Aufrufe mischten.
Chris Franklin

9
Ich bin auf dieses Problem gestoßen, als ich versucht habe, den Iframe im Dom zu verschieben. playerEl = document.querySelector('iframe#ytplayer'); anotherEl.appendChild(playerEl); // yt complains on subsequent api calls
Posit Labs

1
Was ist, wenn ich Javascript zum Laden des YouTube-Players verwende?
N3R4ZZuRR0

5
geändert zu https: // für youtube und meine Domain ist https: // immer noch nicht mein Problem zu lösen. 'PostMessage' in 'DOMWindow' konnte nicht ausgeführt werden: Der angegebene Zielursprung (' youtube.com ') stimmt nicht mit dem Ursprung des Empfängerfensters (' test.dev ') überein .
Vee

23

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' },
}

7
Herkunft: window.location, in den Eigenschaften für Entwickler und Produktion
James Bailey

3
@ JamesBailey window.location.origin.. window.locationist ein Objekt.
Acidic9

Wie das API-Dokument sagt, wird origin playerVar nur mit einer reinen iframe-Implementierung verwendet. Nicht JS API eins.
Damien C

1
Alle diese 'Korrekturen' funktionieren hier im Jahr 2020 nicht für uns. Außerdem wird die zufällige Belastung pro Seite hinzugefügt, wenn der Fehler auftritt. Es ist eine Rennbedingung zwischen unserer Seite und Youtube.
IncredibleHat

window.location.host
LeeGee

19

Das Einstellen scheint dies zu beheben:

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

3
es http (statt https) zu machen, löste mein Problem.
T.Todua

5
Das hat es auch für mich behoben. Kann auch tun : host: `${window.location.protocol}//www.youtube.com`,
Joel Worsham

2
Alle diese 'Korrekturen' funktionieren hier im Jahr 2020 nicht für uns. Außerdem wird die zufällige Belastung pro Seite hinzugefügt, wenn der Fehler auftritt. Es ist eine Rennbedingung zwischen unserer Seite und Youtube.
IncredibleHat

8

Sie können das JavaScript in lokalen Dateien speichern:

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


Es wurde für mich behoben. Hatte die Dateien sowieso lokal so passend zu meinem Anwendungsfall.
häufig

Das hat auch bei mir funktioniert, aber ich bin mir nicht sicher warum. Können Sie erklären, warum dies das Problem behebt?
Jchavannes

1
Vielen Dank, beantwortete meine Frage beim zweiten Ajax-Anruf: stackoverflow.com/questions/58232081/…
Diogo Almeida

Aus meiner Sicht ist die Verwendung einer lokalen Datei für die Bibliothek, insbesondere für die Servicebibliothek eines Drittanbieters, eine sehr schlechte Methode zum Codieren. Nein ?
Damien C

@ DamienC Es ist sicher weniger als ideal. Aber basierend auf all den anderen "Korrekturen" in diesem Thread bin ich nicht überrascht (noch beurteile ich wirklich), dass andere Entwickler den API-Code manuell ändern.
Erutan409


3

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


Schön, ich habe alle anderen Antworten ausprobiert und das hat bei mir funktioniert!
Kloshar4o

3

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


0

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.


Könntest du bitte sehen, ob du verstehst, was ich hier auf YouTube erlebe und ob es damit zusammenhängt? stackoverflow.com/q/57649870/470749 Vielleicht haben Sie eine Antwort. Vielen Dank!
Ryan

0

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.


0

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.


0

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 );


0

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.


Es hat document.addEventListener("DOMContentLoaded", function () {leider nicht geholfen, alles hinein zu stecken.
Ryan

0

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"
                }, '*')

0

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.


0

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


-1

Du kannst es versuchen :

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

-1

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.


-2

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.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.