Wie man richtig verwenden Sie postMessage zu tun cross-domain-messaging mit html5 und moderne Browser ? Ich bekomme immer noch Fehler

Ich bin mir sicher, dass hier etwas nicht stimmt, aber ich kann nicht ganz den finger drauf... Das Beispiel hier verhält sich gut mit keine Hinweise oder Fehler auf der Konsole, so dass es bedeutet, mein browser unterstützt cross-domain-messaging mit html5 (natürlich tut Sie das, es ist Chrome 14..).

Mein code ist mehr oder weniger die folgenden: Ein Skript geladen WebsiteA.com erstellt ein iframe und fügt es an WebsiteA.com's Dokument. Das frame angehängt wird, enthalten WebsiteB.com und wenn es geladen ist, muss es eine Nachricht zu schicken, es ist Elternteil, WebsiteA.com zu sagen, dass es WebsiteB.com ist bereit zu empfangen, einige JSON. Wenn WebsiteA.com erhalten diese Nachricht, sendet er die JSON.

So WebsiteA.com eine Linie, die kurz vor </body> nur so: <script scr="http://WebsiteB.com/load-my-iframe.js" type="text/javascript"></script>, und im inneren der load-my-iframe.js habe ich folgende:

var child = document.createElement('iframe');
child.src = 'http://WebsiteB.com/child.html';

var body = document.getElementsByTagName('body')[0]
body.appendChild(child);

var SomeJSON = {"something" : "that WebsiteB should have"};

window.onmessage = function (e) {
    if (e.origin === 'http://WebsiteB.com' && e.data === 'ready') {
            e.source.postMessage(SomeJSON, 'http://WebsiteB.com');
    }
}

Damit schafft das iframe-element, fügt es an WebsiteA.com's Dokument und wartet, bis es zu sagen, dass es fertig ist (Schätze ich...). Auf WebsiteB.com ich habe die Datei child.html das ist src des iframe geladen WebsiteA.com's Dokument und die Datei hat folgenden Wortlaut:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <title>WebsiteB.com</title>
        <script type="text/javascript">
            window.onload = function () {
                window.parent.postMessage('ready','*');
            }

            window.addEventListener('message', receiveMessage, false);
            function receiveMessage(event) {
                if (event.data.something === "that WebsiteB should have") {
                    document.write('It worked!');
                }
            }
        </script>
    </head>
    <body>
    </body>
</html>

Und jetzt die weird stuff:

Ich leider nicht besitze WebsiteA.com und WebsiteB.com aber ich habe diese arbeiten, die zwischen einer top-level-domain und einer subdomain (endet mit .no.de). Es funktioniert wirklich, ABER in Google Chrome 14 die Konsole bekomme ich die klassische Unsafe JavaScript attempt to access frame with URL http://WebsiteA.com/ from frame with URL http://WebsiteB.com/child.html. Domains, protocols and ports must match.. Die Beispiel aus html5demos funktioniert ohne diesen Fehler.

Warum erhalte ich diese Fehlermeldung und wie kann ich es loswerden ?

Sind Sie sicher, dass es nicht funktioniert? Ich sah dies und ich bekam eine Verwarnung, aber es hat geklappt, glaube ich.

InformationsquelleAutor João Pinto Jerónimo | 2011-10-04

  1. 1

    Ich habe gerade versucht deinen code und das scheint zu funktionieren in Chrome. Es nutzt jsfiddle und jsbin Nachrichten zu übergeben, die zwischen parent-und child-windows.

    http://jsbin.com/oxesef/4/edit#preview

    Es funktioniert bei mir auch, aber ich möchte, um loszuwerden, die Fehler...

    InformationsquelleAutor Paul Grime

  2. 0

    Dies ist nicht die Antwort, aber könnte dir helfen.

    Benutze ich http://easyxdm.net/wp/ zu vermeiden, diese Art von Problemen.

    Carl

    Ich dachte darüber nach, sondern Bullauge (github.com/ternarylabs/porthole), scheint besser konzipiert, einfacher, kleiner (5kb minified) und unterstützt den vintage-Browser. Aber für das, was ich Tue, ich muss nur auf Browsern, die html5 unterstützen, so dass alles, was ist abwärtskompatibel ist nicht erforderlich und übergewicht.
    Danke @JoãoPintoJerónimo!

    InformationsquelleAutor Malartre

Schreibe einen Kommentar