Implémenter un événement onload dans iframe en JavaScript

1. Exécuter une fonction JavaScript sur une charge d’un iFrame
2. Implémentation sur l’événement load dans iframe à l’aide de JavaScript pur
3. Implémenter sur l’événement load dans iframe à l’aide du programme d’écoute d’événements onload
4. Utilisez la fonction Inline dans le gestionnaire d’événements onload de HTML de iframe

<iframe> signifie l’élément de cadre en ligne. Ce sont des fenêtres pour charger d’autres pages Web sur notre site Web et interagir avec elles. Les sites ou pages Web chargés à l’aide de iframe conservent leur historique de session et leurs valeurs de cache et ne dépendent pas du parent ou de l’écran du navigateur appelant. Parfois, nous pouvons avoir besoin d’exécuter une fonction une fois que le contenu iFrame est chargé. Voyons comment exécuter une méthode en JavaScript une fois que le contenu de l’iframe est chargé.

Exécuter une fonction JavaScript sur une charge d’un iFrame

On peut utiliser le gestionnaire d’événement onload de la balise HTML iframe. L’événement se déclenche une fois que tous les éléments de l’iframe sont chargés. Il s’agit notamment d’un chargement de scripts, d’images, de liens, de sous-trames etc. Il accepte une déclaration de fonction comme paramètre que nous mentionnons dans la balise HTML. Le onload="siteLoaded()" exécutera la fonction siteLoaded(), une simple fonction JavaScript qui enregistre un texte dans la console du navigateur Web. Référez-vous au code suivant.

<iframe src="https://www.youtube.com/" onload="siteLoaded()"></iframe>

function siteLoaded() {
  console.log('iframe content loaded');
}

Production :

iframe content loaded

Implémentation sur l’événement load dans iframe à l’aide de JavaScript pur

Une autre façon d’exécuter une fonction JavaScript une fois le chargement d’une iframe terminé consiste à utiliser le gestionnaire d’événements onload de JavaScript. Pour cela, nous recherchons l’élément HTML souhaité et attachons la fonction JavaScript sur le gestionnaire d’événement onload de l’élément HTML. Il est similaire à la façon dont nous avons expliqué dans la section précédente. La différence est que nous utilisons ici une approche JavaScript pure appelée JavaScript discret. Le HTML est maintenu léger et propre. Regardons le code suivant pour mieux comprendre.

<iframe src="https://www.youtube.com/"></iframe>

document.querySelector('iframe').addEventListener('load', function() {
  console.log('iframe content loaded');
});

Production :

iframe content loaded

L’exécution de ce code peut provoquer une erreur indiquant que JavaScript ne peut pas ajouter un écouteur à un objet null. Pour cela, nous devrons encapsuler le code dans la méthode window.onload. Reportez-vous à l’extrait de code suivant.

window.onload = function() {
  document.querySelector('iframe').addEventListener('load', function() {
    console.log('iframe content loaded');
  });
}

JavaScript exécute la fonction window.onload une fois qu’il a chargé tous les éléments de la window. La fonction addEventListener() de JavaScript relie un écouteur d’événement à l’objet HTML. Nous devons d’abord sélectionner l’objet HTML dans lequel nous avons l’intention d’ajouter l’écouteur d’événement. Le document.querySelector() renvoie un objet HTML, sur cet objet nous attachons l’écouteur d’événement load avec la fonction addEventListener(). Le addEventListener() attache une fonction, ici une fonction inline, qui est déclenchée une fois l’élément iframe chargé. Nous pouvons ajouter un large éventail d’événements à un élément HTML en utilisant la fonction addEventListener(). Mais pour la portée de notre discussion, nous nous concentrerons sur l’événement load. De même, on peut aussi ajouter l’événement click à un objet HTML.

Implémenter sur l’événement load dans iframe à l’aide du programme d’écoute d’événements onload

Comme le .addEventListener(), nous pouvons également opter pour l’événement onload. Ici aussi, nous sélectionnons l’élément iframe à l’aide de fonctions comme document.getElementById() ou document.querySelector(). Une fois l’élément sélectionné, nous lui attachons une fonction JavaScript. Cela peut également être fait de plusieurs manières. Une façon est de passer la fonction en ligne. Et une autre façon est d’attacher l’objet fonction sans utiliser le (). Si nous utilisons (), JavaScript exécutera la fonction à la première instance elle-même. En JavaScript, nous utilisons le onload pour sa seule fonction, contrairement au .addEventListener(), qui est plus générique. Référez-vous au code suivant pour comprendre l’utilisation de la fonction onload.

<iframe id="my_iframe" src="https://www.youtube.com/"></iframe>

window.onload = function() {
  document.getElementById('my_iframe').onload = function() {
    console.log('iframe content loaded');
  };
}

Nous encapsulons la section de code document.getElementById('my_iframe').onload à l’intérieur de la window.onload, juste pour nous assurer que JavaScript est capable d’interroger l’élément. Le window.onload garantit que tous les éléments sont chargés et sont disponibles pour document.getElementById('my_iframe') pour les récupérer. Une fois l’élément interrogé, nous lui attachons la fonction à l’aide du gestionnaire d’événement onload de l’objet HTML.

Utilisez la fonction Inline dans le gestionnaire d’événements onload de HTML de iframe

Une autre façon d’exécuter une fonction sur l’événement de chargement consiste à attacher une méthode en ligne dans le code HTML. Bien que ce ne soit pas la méthode recommandée pour implémenter une fonction JavaScript sur les événements de chargement, elle s’avère utile en tant que hack en cas de besoin urgent. Dans cette approche, nous passons la méthode inline dans le HTML dans l’attribut de fonction onload de l’élément iframe. JavaScript exécutera la fonction une fois que l’iframe sera prête. Référez-vous au code suivant pour comprendre l’utilisation.

<iframe src="https://www.youtube.com/" onload="(function(){ console.log('iFrame Loaded'); })();"></iframe>

Production :

iFrame Loaded

Observez la façon dont nous écrivons l’appel de fonction dans le gestionnaire d’événement onload. L’appel de fonction en ligne est entouré de (). Et il y a un () après l’appel de la fonction en ligne. Cela revient à attacher une déclaration de fonction dans l’événement onclick pour un div.