cross-site-iframe postMessage vom Kind zum Elternteil

Fand ich diese Beispielaus, SO dass beim surfen für mein problem, aber ich möchte genau wissen, wie es in meinem Szenario.
Ich habe ein iframe von einer anderen domain, und ich möchte, dass Sie erkennen, wenn Sie die iframe-url geändert von einer zur anderen Seite in die andere Domäne. Also, was ich dachte ist, so etwas zu haben wenn der 2. Seite in dem iframe geöffnet wird:

<script type="text/javascript">
    $(document).ready(function() {
parent.postMessage("Second Page");
}
</script>

Dass ist alles was ich brauche, brauche ich nur eine Mitteilung erhalten, dass der iframe hat andere url. Jetzt auf der übergeordneten Seite, ich werde vielleicht so etwas wie dieses:

<script type="text/javascript">
    $(document).ready(function() {
        $('#frame').load(function () { 
            var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

//Listen to message from child window
eventer(messageEvent,function(e) {
 var secondPageValue = //I want to get the value from the child page here, how can I do that?
},false);               
        });
    });
</script>

Ich versuche zu postMessage verwenden Sie diese option zum ersten mal, so dass jede Beratung wird sehr geschätzt.
Auch, muss ich auf einige JS-Bibliotheken wie jquery auf untergeordnete Seite, um diese Arbeit zu machen?

Vielen Dank im Voraus, Laziale

InformationsquelleAutor Laziale | 2014-04-04
  1. 12

    Müssen Sie targetOrigin bei der Verwendung von postMessage.

    <script type="text/javascript">
    $(document).ready(function() {
       parent.postMessage("Second Page",'*');
    }
</script>

    Dann auf der host-Seite.

    function addAnEventListener(obj,evt,func){
    if ('addEventListener' in obj){
        obj.addEventListener(evt,func, false);
    } else if ('attachEvent' in obj){//IE
        obj.attachEvent('on'+evt,func);
    }
}

function iFrameListener(event){
     secondPageValue = event.data;
}

var secondPageValue='';

addAnEventListener(window,'message',iFrameListener);
    • Es gibt mehrere Probleme mit diesem code. Zum Beispiel definieren Sie die Funktion addEventListener, und verlassen sich dann auf die Fenster.addEventListener wurde gerade überschrieben, die von Ihrer Funktion Erklärung. Auch sollten Sie vielleicht prüfen, ob 'addEventListener' in obj anstatt Fenster.
    InformationsquelleAutor David Bradshaw
  2. 5

    Überprüfen http://davidwalsh.name/window-iframe aus. Dies ist ein perfektes Beispiel.

    Das parent-Objekt stellt eine Referenz auf das Hauptfenster über das Kind. Also wenn ich einen iFrame und tröste die Eltern in Ihr, der Konsole Lesen:

    //Every two seconds....
setInterval(function() {
    //Send the message "Hello" to the parent window
    //...if the domain is still "davidwalsh.name"
    parent.postMessage("Hello","http://davidwalsh.name");
}, 3000);

    Da haben wir jetzt halt das Fenster, wir können postMessage es:

    //Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

//Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
},false);

    Die Richtlinie oben löst das iFrame senden Sie eine Nachricht an das übergeordnete Fenster alle 3 Sekunden. Keine erste Nachricht aus dem Hauptfenster benötigt!

    • tnx Raidri.. Werde es tun.
    InformationsquelleAutor Dilip Rajkumar
Schreibe einen Kommentar