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.com
und der Empfängerursprung liegen https://www.youtube.com
, aber keine wie meine, bei denen das Ziel https://www.youtube.com
und der Ursprung liegen http://localhost:9000
.
- Ich verstehe das Problem nicht. Was ist das Problem?
- Wie kann ich es reparieren?
javascript
angularjs
youtube
youtube-api
youtube-iframe-api
Adam Zerner
quelle
quelle
Antworten:
Ich glaube, dies ist ein Problem mit dem Zielursprung
https
. Ich vermute, es liegt daran, dass Ihre iFrame-URLhttp
anstelle von verwendethttps
. Versuchen Sie, die URL der Datei, in die Sie einbetten möchten, zu ändernhttps
.Zum Beispiel:
sein:
quelle
http
gegenüberhttps
? 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)?localhost:9000
. Das Problem lag tatsächlich in der Art und Weise, wie Sie die YouTube-API verwendet haben. Wenn du die API wietag.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.playerEl = document.querySelector('iframe#ytplayer'); anotherEl.appendChild(playerEl); // yt complains on subsequent api calls
Fügen Sie einfach den Parameter
"origin"
mit der URL Ihrer Site in dasparamVars
Attribut des Players ein:quelle
window.location.origin
..window.location
ist ein Objekt.window.location.host
Das Einstellen scheint dies zu beheben:
quelle
http
(statthttps
) zu machen, löste mein Problem.host: `${window.location.protocol}//www.youtube.com`
,Sie können das JavaScript in lokalen Dateien speichern:
Fügen Sie in die erste Datei
player_api
diesen Code ein:Suchen Sie in der zweiten Datei den Code:
this.a.contentWindow.postMessage(a,b[c]);
und ersetzen Sie es durch:
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
quelle
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.
quelle
Versuchen Sie,
window.location.href
die URL so zu verwenden, dass sie mit dem Ursprung des Fensters übereinstimmt.quelle
Ich habe den gleichen Fehler bekommen. Mein Fehler war, dass der
enablejsapi=1
Parameter imiframe
src nicht vorhanden war .quelle
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 beschriebene
player.destroy()
Funktion verwenden , ist das Problem behoben.quelle
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.
quelle
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.
quelle
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
quelle
Sie können Ihren Iframe so ändern und den Ursprung zu Ihrer aktuellen Website hinzufügen. Es behebt Fehler in meinem Browser.
ref: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
quelle
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.
quelle
document.addEventListener("DOMContentLoaded", function () {
leider nicht geholfen, alles hinein zu stecken.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.quelle
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.
quelle
In einigen Fällen (wie ein Kommentator erwähnte) kann dies verursacht werden, wenn Sie den Player innerhalb von DOM bewegen, wie
append
oder etc ..quelle
Du kannst es versuchen :
quelle
Ich hatte auch das gleiche Problem, als ich die offizielle Youtube Iframe Api besuchte, wo ich Folgendes fand:
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.
quelle
meins war:
Ich habe gerade die Leitung mit playerVars entfernt und es hat ohne Fehler auf der Konsole funktioniert.
quelle