Maison >interface Web >tutoriel HTML >Comment déterminer si le chargement de l'iframe est terminé

Comment déterminer si le chargement de l'iframe est terminé

WBOY
WBOYoriginal
2024-02-22 11:33:03928parcourir

Comment déterminer si le chargement de liframe est terminé

Comment juger quand le chargement d'une iframe est terminé : exemple de code

Dans le développement Web, lorsque des pages externes ou d'autres pages Web doivent être chargées, la balise iframe est souvent utilisée. Cependant, nous devons parfois effectuer certaines opérations après le chargement de l'iframe, comme obtenir le contenu de l'iframe ou exécuter du code JavaScript. Par conséquent, juger que l’iframe est chargé est une tâche très importante.

Ci-dessous, je partagerai plusieurs méthodes pour déterminer si l'iframe est chargée et fournirai des exemples de code spécifiques.

  1. Utilisez l'événement onload de l'iframe
    La balise iframe fournit un événement onload, qui sera déclenché lorsque le contenu de l'iframe est chargé. Nous pouvons déterminer si l'iframe est chargée en intégrant une iframe cachée dans la page et en écoutant son événement onload.

Code HTML :

<iframe id="myIframe" src="external.html" style="display:none;"></iframe>

Code JavaScript :

var iframe = document.getElementById("myIframe");
iframe.onload = function() {
  // iframe加载完成后执行的操作
  console.log("iframe加载完成");
};
  1. Utilisation de l'attribut contentWindow d'iframe
    Grâce à l'attribut contentWindow d'iframe, nous pouvons obtenir l'objet fenêtre de la page intégrée. En utilisant cet objet, nous pouvons déterminer si le document dans l'iframe a été chargé.

Code HTML :

<iframe id="myIframe" src="external.html"></iframe>

Code JavaScript :

var iframe = document.getElementById("myIframe");
var iframeWindow = iframe.contentWindow;

var checkIframeLoaded = function() {
  if (iframe && iframe.contentDocument.readyState === 'complete') {
    // iframe加载完成后执行的操作
    console.log("iframe加载完成");
  } else {
    // 等待iframe加载完成
    setTimeout(checkIframeLoaded, 100);
  }
};

checkIframeLoaded();
  1. Utiliser la méthode ready de jQuery
    Si la bibliothèque jQuery est utilisée dans le projet, vous pouvez utiliser la méthode ready qu'elle fournit pour déterminer que l'iframe est chargée.

Code HTML :

<iframe id="myIframe" src="external.html"></iframe>

Code JavaScript :

$(document).ready(function() {
  $('#myIframe').on('load', function() {
    // iframe加载完成后执行的操作
    console.log('iframe加载完成');
  });
});

Vous trouverez ci-dessus plusieurs méthodes et exemples de code pour déterminer quand le chargement de l'iframe est terminé. Sélectionnez la méthode appropriée en fonction de la situation réelle pour surveiller et traiter l'événement de fin de chargement de l'iframe. J'espère que cet article vous sera utile pour juger si l'iframe est chargé !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn