„postMessage“ konnte nicht auf „DOMWindow“ ausgeführt werden: Der angegebene Zielursprung stimmt nicht mit dem Ursprung des Empfängerfensters überein („null“).

Ich habe ein Spiel in Heroku, jetzt versuche ich, es im Facebook-Canvas zum Laufen zu bringen, aber während es in Firefox funktioniert, funktioniert es in Chrome und IE nicht.

IE zeigt eine Warnung mit einer Schaltfläche an. Wenn Sie auf die Schaltfläche klicken, wird der Inhalt angezeigt.

In Chrome erhalte ich diese Fehlermeldung:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://game.herokuapp.com') does not match the recipient window's origin ('null').

Was ist falsch?

Stellen Sie sicher, dass das Zielfenster, in dem Sie (oder Facebook) eine Nachricht posten, vollständig geladen ist. In den meisten Fällen erhalte ich diesen Fehler, wenn ein Iframe, an den ich Nachrichten gesendet habe, nicht geladen werden konnte.

Ein weiterer Grund dafür könnte sein, dass Sie einen Iframe verwenden, der über das Sandbox-Attribut und verfügt allow-same-origin ist nicht gesetzt, z. B.:

// page.html
<iframe id="f" src="http://localhost:8000/iframe.html" sandbox="allow-scripts"></iframe>
<script type="text/javascript">
    var f = document.getElementById("f").contentWindow;
    // will throw exception
    f.postMessage("hello world!", 'http://localhost:8000');
</script>

// iframe.html
<script type="text/javascript">
    window.addEventListener("message", function(event) {
        console.log(event);
    }, false);
</script>

Ich habe keine andere Lösung gefunden als:

• „allow-same-origin“ zur Sandbox hinzufügen (wollte das nicht tun)
• verwenden f.postMessage("hello world!", '*');

VERWANDTER HINWEIS: Wenn Sie Nachrichten von einem Iframe an die Hostseite senden, erhalten Sie diese Fehlermeldung, wenn Sie vergessen, window.top.postMessage zu verwenden.

Ohne .top senden Sie die Nachricht an Iframes innerhalb des Iframes.

Um zu überprüfen, ob der Frame geladen wurde, verwenden Sie die Onload-Funktion. Oder setzen Sie Ihre Hauptfunktion in „load“: Ich empfehle, „load“ zu verwenden, wenn Sie den iframe per js erstellen

 $('<iframe />', {
   src: url,
   id:  'receiver',
   frameborder: 1,
   load:function(){
     //put your code here, so that those code can be make sure to be run after the frame loaded
   }
   }).appendTo('body');

In meinem Fall habe ich das nicht hinzugefügt http:// Präfix. Potenziell einen Blick wert.

In meinem Fall war das SSL-Zertifikat für die Iframe-Domäne ungültig. Stellen Sie daher sicher, dass die Iframe-URL, an die Sie Nachrichten senden möchten, ohne Probleme geöffnet wird (falls Sie Ihren Iframe laden). https).

Ich habe versucht, domänenübergreifendes Messaging zwischen der übergeordneten Seite und dem eingebetteten Iframe durchzuführen. Die Verwendung war erfolglos
window.postMessage('text', '*'); – Die Nachricht wurde auf der Iframe-Seite einfach nie empfangen.

Der Wechsel hierauf hat es auf den Punkt gebracht:
document.querySelector('iframe').contentWindow.postMessage('text', '*');