Comment intercepter l'évènement .ready d'une iframe avec jQuery ?
La méthode jQuery ready() de l'objet document définit un code qui ne sera exécuté que lorsque la page sera chargée. Mais ce chargement ne s'applique pas aux iFrames. Alors comment faire ?
La balise HTML <iframe> permet d'insérer dans une page HTML une fenêtre contenant le code d'une autre page HTML. Lorsque l'on met en place une iframe, il faut faire attention à la manière de détecter le moment où le contenu de l'iframe sera chargé au sein de la page.
La méthode jQuery ready() de l'objet document définit un code qui ne sera exécuté que lorsque la page sera entièrement chargée. Mais ce chargement ne s'applique pas aux iframes, qui sont indépendantes. Pour détecter la fin du chargement d'une iframe, on utilise l'évènement load (lire le tutoriel associé Comment appliquer les CSS d'une page web au contenu d'une iframe ?).
Exemple :
function callIframe(url, callback) {
//Code pour ajouter l'IFrame à la page
$(document.body).append('<IFRAME id=monIframe ...>');
$('iframe#monIframe').attr('src', url);
$('iframe#monIframe').load(function()
{
//Code exécuté après le chargement de l'iFrame
});
}
On peut également utiliser une fonction qui, avec un timer, récupère le contenu de la balise body située dans l'iFrame. Si la longueur du code contenu dans le body n'est pas égale à 1, alors la fenêtre est chargée.
$(function() {
function manipIframe() {
contenu = $('body', $('iframe').contents());
if (contenu.length != 1) {
setTimeout(manipIframe, 100); //Mise en place du timer pour rappeler la fonction
return;
}
//Code exécuté après le chargement de l'iFrame
}
manipIframe();
});