Wykrywanie załadowania zawartości iframe (wiele przeglądarek)

Próbuję wykryć, kiedy element iframe i jego zawartość zostały załadowane, ale nie mam szczęścia. Moja aplikacja pobiera dane w polach tekstowych w oknie nadrzędnym i aktualizuje ramkę iframe, aby zapewnić „podgląd na żywo”

Zacząłem od następującego kodu (YUI), aby wykryć, kiedy wystąpi zdarzenie ładowania iframe.

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

„okienko podglądu” to identyfikator mojego elementu iframe i używam YUI do dołączania obsługi zdarzeń. Jednak próba uzyskania dostępu do treści w moim wywołaniu zwrotnym (po załadowaniu elementu iframe) kończy się niepowodzeniem, ponieważ element iframe ładuje się, zanim program obsługi zdarzeń jest gotowy. Ten kod działa, jeśli opóźnię ładowanie iframe, powodując uśpienie skryptu PHP, który go generuje.

Zasadniczo pytam, jakie jest prawidłowe podejście w różnych przeglądarkach do wykrywania, kiedy element iframe został załadowany, a jego dokument jest gotowy?

wykryć, kiedy element iframe został załadowany, a jego dokument jest gotowy?

Idealnie byłoby, gdyby element iframe mógł sam się rozpoznać na podstawie skryptu wewnątrz ramki. Na przykład może bezpośrednio wywołać funkcję nadrzędną, aby powiedzieć, że jest gotowa. Zawsze należy zachować ostrożność przy wykonywaniu kodu między ramkami, ponieważ może się zdarzyć w kolejności, której się nie spodziewasz. Inną alternatywą jest ustawienie „var isready = true;” we własnym zakresie i mieć skrypt nadrzędny wyszukujący „contentWindow.isready” (i jeśli nie, dodaj procedurę obsługi ładowania).

Jeśli z jakiegoś powodu niepraktyczne jest współdziałanie dokumentu iframe, masz tradycyjny problem z wyścigiem ładowania, a mianowicie, że nawet jeśli elementy są tuż obok siebie:

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

nie ma gwarancji, że element nie zostanie załadowany do czasu wykonania skryptu.

Sposoby wyjścia z wyścigów na ładowanie to:

1. w IE możesz użyć właściwości „readyState”, aby sprawdzić, czy coś jest już załadowane;

2. jeśli dopuszczalny jest element dostępny tylko z włączoną obsługą JavaScript, można go utworzyć dynamicznie, ustawiając funkcję zdarzenia „onload” przed ustawieniem źródła i dołączeniem do strony. W tym przypadku nie można go załadować przed ustawieniem wywołania zwrotnego;

3. oldschoolowy sposób umieszczania go w znacznikach:

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

Wbudowane funkcje obsługi „onsomething” w HTML prawie zawsze są niewłaściwe i należy ich unikać, ale w tym przypadku czasami jest to najmniej zła opcja.

Zobacz ten wpis na blogu. Używa jQuery, ale powinno ci pomóc, nawet jeśli go nie używasz.

Zasadniczo dodajesz to do swojego document.ready()

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

Dla tych, którzy używają Reacta, wykrycie zdarzenia ładowania onLoadelementu iframe z tego samego źródła jest tak proste, jak ustawienie detektora zdarzeń w elemencie iframe.

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

Dla każdego, kto używa Ember, powinno to działać zgodnie z oczekiwaniami:

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