Wie löse ich iFrame in einem iFrame?

Question

Ich sende Nachrichten an iFrame, aber nur auf iFrame laden Ereignis. Möchten Sie es manuell auslösen, ohne die Seite neu zu laden, nachdem Sie DOM geändert haben.

Erläuterung: Es ist eine Art Umfrage und bei Seitenwechsel sende ich Seitengröße. Problem tritt auf, wenn ich ein neues Bild in DOM einfüge, dann muss ich die übergeordnete Seite mitteilen und das iFrame-Ereignis load auslösen. Die Nachricht wird parent-> iframe, iframe-> parent nur bei iFrame laden.

Answer 1

Anstatt ein Load-Ereignis auszulösen, sollten Sie eine Nachricht verwenden, die von Ihrem IFrame gepostet wird.

JavaScript in äußeren Rahmen (dies legt einen Ereignis-Listener für Nachrichten und zeigt eine Warnung, wenn eine Nachricht empfangen wird):

window.addEventListener('message', function(e) { 
    // This check can be removed for testing purposes, but for security 
    // it's strongly recommended that you leave it in there and replace 
    // the domain with the one of your IFrame's src, to ensure you process 
    // only messages coming from your own code and not somebody else's. 
    if(e.origin != "http://yourdomain.com") return; 

    alert("Got a message: " + e.data); 
}); 

JavaScript in inneren Rahmen (dies sendet eine Nachricht an das übergeordnete Fenster - es sollte auslösen den Hörer hin und zeigen die Warnung):

// The second parameter can be replaced by "*" for testing, but again it 
// is strongly recommended to use the domain you expect the outer frame 
// to have, to ensure your message lands in the right window (in case 
// another page loaded yours in an IFrame). 
window.parent.postMessage("Hello World!", "http://yourdomain.com"); 

Statt "Hello World!", können Sie auch JS Objekte übergeben.

Es funktioniert auch andersherum: Wenn Sie einen Message-Listener auch in Ihrem IFrame installieren, können Sie auch Nachrichten vom äußeren Rahmen zum inneren senden, indem Sie etwas wie document.getElementById('myIframe').contentWindow.postMessage(...) verwenden.

Siehe auch: http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage