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.
quelle
Antworten:
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:
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:
Im IE können Sie die Eigenschaft 'readyState' verwenden, um festzustellen, ob bereits etwas geladen ist.
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.
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.
quelle
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()
quelle
console.log
. Es wird protokolliert, nachdem der Iframe geladen wurde.Für diejenigen, die React verwenden, ist das Erkennen eines Iframe-Ladeereignisses mit demselben Ursprung so einfach wie das Festlegen des
onLoad
Ereignis-Listeners für das Iframe-Element.<iframe src={'path-to-iframe-source'} onLoad={this.loadListener} frameBorder={0} />
quelle
onLoad
Ereignis nur für einen Iframe mit demselben Ursprung ausgelöst werden?Für alle, die Ember verwenden, sollte dies wie erwartet funktionieren:
quelle