Przechwyć zdarzenie zakończenia ładowania elementu iframe

Odpowiedzi:

197

<iframe>elementy mają na to loadwydarzenie .


To, jak słuchasz tego wydarzenia, zależy od Ciebie, ale ogólnie najlepszym sposobem jest:

1) utwórz programowo element iframe

Zapewnia to, że loadsłuchacz jest zawsze wywoływany, dołączając go przed rozpoczęciem ładowania elementu iframe.

<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...'; 
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>

2) wbudowany javascript to kolejny sposób, w jaki możesz użyć wewnątrz znaczników HTML.

<script>
function onMyFrameLoad() {
  alert('myframe is loaded');
};
</script>

<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>

3) Możesz również dołączyć detektor zdarzenia po elemencie , wewnątrz <script>tagu, ale pamiętaj, że w tym przypadku istnieje niewielka szansa, że ​​element iframe jest już załadowany do czasu dodania listenera. Dlatego możliwe jest, że nie zostanie wywołany (np. Jeśli ramka iframe jest bardzo szybka lub pochodzi z pamięci podręcznej).

<iframe id="myframe" src="..."></iframe>

<script>
document.getElementById('myframe').onload = function() {
  alert('myframe is loaded');
};
</script>

Zobacz także moją drugą odpowiedź na temat tego, które elementy mogą również wywoływać tego typu loadzdarzenia

gblazex
źródło
2
Dzięki, robi dokładnie to, czego potrzebowałem!
Jaime Garcia
1
Dzięki tej metodzie można uruchomić tylko jedną funkcję, gdy jest ładowany element iframe. Zobacz moją odpowiedź poniżej używając addEventListenerktóry umożliwia wielokrotne wywołania zwrotne do uruchomienia w przypadku obciążenia.
Ostatni
1
Takie podejście jest również podatne na sytuacje wyścigu, ponieważ iframe może załadować się przed wykonaniem tagu skryptu.
Ostatni
7
Zdarzenie ładowania nie działa, gdy próbujesz pobrać plik.
Jerry
1
Tak, to nie działa w IE, jeśli zawartość iFrame nie jest HTML, np. PDF. Zobacz: connect.microsoft.com/IE/feedback/details/809377/ ...
Sergey Gussak
27

Żadna z powyższych odpowiedzi nie zadziałała dla mnie, jednak zadziałała

AKTUALIZACJA :

Jak @doppleganger wskazał poniżej, ładowanie zniknęło od jQuery 3.0, więc oto zaktualizowana wersja, która używa on. Pamiętaj, że to faktycznie zadziała w jQuery 1.7+, więc możesz to zaimplementować w ten sposób, nawet jeśli nie jesteś jeszcze w jQuery 3.0.

$('iframe').on('load', function() {
    // do stuff 
});
roryok
źródło
1
Od wersji jQuery 3.0 loadnie ma. Użyj .on('load', function() { ... })zamiast tego.
Doppelganger
Jeśli używasz jquerylub jqLiteto jest droga do zrobienia!
Peter
11

Jest na to inny spójny sposób ( tylko dla IE9 + ) w waniliowym JavaScript:

const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');

iframe.addEventListener('load', handleLoad, true)

A jeśli interesują Cię Observables, to załatwia sprawę :

return Observable.fromEventPattern(
  handler => iframe.addEventListener('load', handler, true),
  handler => iframe.removeEventListener('load', handler)
);
aitorllj93
źródło
Czy istnieje obawa, że ​​mój debuger zatrzymuje się w punkcie przerwania, handleLoad()zanim zobaczę renderowanie elementu iFrame? Mam nadzieję, że jest to wyłącznie problem z renderowaniem, a nie z ładowaniem treści.
Sridhar Sarnobat
co powiesz na przechwycenie tego zdarzenia przez jquery, gdy iframe już tam jest ... tj .: iframe nie jest tworzony przez jquery.
gumuruh
3

Zwróć uwagę, że zdarzenie onload nie jest uruchamiane, jeśli element iframe jest ładowany poza ekranem. Dzieje się tak często podczas używania kart „Otwórz w nowym oknie” / w.

Kenneth M. Kolano
źródło
2
także z ramkami iframe bez wyświetlania;)
Felipe N Moura
1

Możesz również przechwycić zdarzenia gotowe do jquery w ten sposób:

$('#iframeid').ready(function () {
//Everything you need.
});

Oto działający przykład:

http://jsfiddle.net/ZrFzF/

Gonza Oviedo
źródło
16
Nie sądzę, że ten kod robi to, co myślisz, że robi. Możesz zastąpić ten selektor „#iFrame” w swoich skrzypcach czymkolwiek, a alarm nadal się uruchamia
roryok
6
Oprócz @roryok, ready jest uruchamiany, gdy DOM jest gotowy, a nie wczytuje się cała strona.
Ivan Nikitin
1
ready jest uruchamiany, gdy DOM jest gotowy i można wykonać js, a nie po załadowaniu treści.
Sergey Gussak
2
$ ("# iframeid"). ready uruchamia funkcję, gdy element znajduje się w domenie. Nie, gdy ifram się załadował.
Popsyjunior
tylko raz dzwonił :(
Hossein Badrnezhad