Erkennen, wann Iframe-Inhalte geladen wurden (Cross-Browser)

Ich versuche festzustellen, wann ein Iframe und sein Inhalt geladen wurden, habe aber nicht viel Glück. Meine Anwendung nimmt einige Eingaben in Textfelder im übergeordneten Fenster vor und aktualisiert den Iframe, um eine Live-Vorschau bereitzustellen.

Ich habe mit dem folgenden Code (YUI) begonnen, um festzustellen, wann das iframe-Ladeereignis auftritt.

$E.on('preview-pane', 'load', function(){
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0];
}

'Vorschau-Bereich' ist die ID meines Iframes und ich verwende YUI, um den Ereignishandler anzuhängen. Der Versuch, in meinem Rückruf auf den Body zuzugreifen (beim Laden des Iframes), schlägt jedoch fehl, da der Iframe geladen wird, bevor der Ereignishandler bereit ist. Dieser Code funktioniert, wenn ich das Laden des Iframes verzögere, indem ich das PHP-Skript, das ihn generiert, in den Ruhezustand versetze.

Grundsätzlich frage ich, was der richtige Ansatz für alle Browser ist, um festzustellen, wann der Iframe geladen wurde und sein Dokument bereit ist.

um festzustellen, wann der Iframe geladen wurde und sein Dokument bereit ist?

Es ist ideal, wenn Sie den Iframe dazu bringen können, sich anhand eines Skripts im Frame zu informieren. Zum Beispiel könnte es eine übergeordnete Funktion direkt aufrufen, um ihr mitzuteilen, dass sie bereit ist. Bei der Ausführung von Cross-Frame-Code ist immer Vorsicht geboten, da Dinge in einer Reihenfolge passieren können, die Sie nicht erwarten. Eine andere Alternative besteht darin, 'var isready = true' zu setzen. in seinem eigenen Bereich, und lassen Sie das übergeordnete Skript nach 'contentWindow.isready' schnüffeln (und fügen Sie den Onload-Handler hinzu, wenn nicht).

Wenn es aus irgendeinem Grund nicht praktikabel ist, das iframe-Dokument zusammenzuarbeiten, haben Sie das traditionelle Problem des Laderennens, nämlich selbst wenn die Elemente direkt nebeneinander liegen:

<img id="x" ... />
<script type="text/javascript">
    document.getElementById('x').onload= function() {
        ...
    };
</script>

Es gibt keine Garantie dafür, dass das Element zum Zeitpunkt der Ausführung des Skripts noch nicht geladen ist.

Die Auswege aus Lastrennen sind:

1. Im IE können Sie die Eigenschaft 'readyState' verwenden, um festzustellen, ob bereits etwas geladen ist.

2. Wenn es akzeptabel ist, das Element nur mit aktiviertem JavaScript verfügbar zu haben, können Sie es dynamisch erstellen, indem Sie die Ereignisfunktion "Onload" festlegen, bevor Sie die Quelle festlegen und an die Seite anhängen. In diesem Fall kann es nicht geladen werden, bevor der Rückruf eingestellt wurde.

3. die alte Art, es in das Markup aufzunehmen:

   <img onload="callback(this)" ... />

Inline-Onsomething-Handler in HTML sind fast immer das Falsche und sollten vermieden werden. In diesem Fall ist dies jedoch manchmal die am wenigsten schlechte Option.

Siehe diesen Blog-Beitrag. Es verwendet jQuery, sollte Ihnen aber auch dann helfen, wenn Sie es nicht verwenden.

Grundsätzlich fügen Sie dies zu Ihrem document.ready()

$('iframe').load(function() {
    RunAfterIFrameLoaded();
});

Für diejenigen, die React verwenden, ist das Erkennen eines Iframe-Ladeereignisses mit demselben Ursprung so einfach wie das Festlegen des onLoadEreignis-Listeners für das Iframe-Element.

<iframe src={'path-to-iframe-source'} onLoad={this.loadListener} frameBorder={0} />

Für alle, die Ember verwenden, sollte dies wie erwartet funktionieren:

<iframe onLoad={{action 'actionName'}}  frameborder='0' src={{iframeSrc}} />