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?
Adam Zerner
quelle
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';
Chris Franklin
quelle
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' },
}
Flávio
quelle
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',
M.Ali El-Sayed
quelle
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

Artur
quelle
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.

Chaitanya Shah
quelle
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 .

ave
quelle
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.

denns
quelle
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.

Gavin
quelle
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.

TomSjogren
quelle
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 );
Terry Lin
quelle
0

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

nhật tài nguyễn
quelle
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.

KMX
quelle
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"
                }, '*')
LukeSolar
quelle
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.

Roger Krueger
quelle
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 ..

T.Todua
quelle
-1

Du kannst es versuchen :

document.getElementById('your_id_iframe').contentWindow.postMessage('your_message', 'your_domain_iframe')
HoaTruong
quelle
-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.

Shahbaz Shoukat
quelle
-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.

Gabriel Alcântara
quelle