webentwicklung-frage-antwort-db.com.de

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 Eingaben in Textfeldern 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];
}

'preview-pane' ist die ID meines iframes und ich benutze YUI, um den Event-Handler anzuhängen. Der Versuch, auf den Body in meinem Callback zuzugreifen (beim Laden des Iframes), schlägt jedoch fehl, da der Iframe geladen wird, bevor die Ereignisbehandlungsroutine bereit ist. Dieser Code funktioniert, wenn ich das Laden des Iframes verzögere, indem ich das PHP-Skript, das es generiert, in den Ruhezustand versetze.

Grundsätzlich frage ich mich, wie die korrekte Vorgehensweise zwischen den Browsern aussehen soll, um festzustellen, wann der iframe geladen wurde und sein Dokument fertig ist.

82

zu erkennen, wenn der Iframe geladen wurde und sein Dokument bereit ist?

Es ist ideal, wenn Sie den iframe dazu bringen können, sich anhand eines Skripts innerhalb des Frames mitzuteilen. Beispielsweise könnte eine übergeordnete Funktion direkt aufgerufen werden, um anzuzeigen, dass sie bereit ist. Bei der Ausführung von Code über mehrere Frames hinweg ist immer Vorsicht geboten, da die Dinge in einer Reihenfolge geschehen können, die Sie nicht erwarten. Eine andere Alternative besteht darin, "var isready = true" in einem eigenen Bereich festzulegen und das übergeordnete Skript nach "contentWindow.isready" zu durchsuchen (und den Onload-Handler hinzuzufügen, falls nicht).

Wenn es aus irgendeinem Grund nicht praktikabel ist, das iframe-Dokument zusammenarbeiten zu lassen, haben Sie das traditionelle Problem der Lastrennen, nämlich das, auch 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 Ladungsrennen sind:

  1. im IE können Sie mit der Eigenschaft "readyState" prüfen, ob bereits etwas geladen ist.

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

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

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

Inline-Handler für "onsomething" in HTML sind fast immer falsch und sollten vermieden werden. In diesem Fall ist dies jedoch manchmal die am wenigsten schlechte Option.

70
bobince

Siehe this Blog Post. Es verwendet jQuery, aber es sollte Ihnen helfen, auch wenn Sie es nicht verwenden.

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

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

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

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

9
Farzad YZ

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

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