recherche

Maison >interface Web >js tutoriel >méthode js pour détecter si l'iframe est chargé_compétences javascript

méthode js pour détecter si l'iframe est chargé_compétences javascript

WBOY
WBOYoriginal
2016-05-16 15:29:391114parcourir

L'exemple de cet article décrit la méthode permettant à js de détecter si l'iframe est chargée. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Voici une application d'extension suite à l'article précédent "Méthode JS pour implémenter la valeur du frame iframe (compatible avec IE, firefox, chrome, etc.) " :

Scénario d'application : L'une des applications les plus uniques de l'iframe à mon avis est qu'il peut réaliser l'écriture inter-domaines de cookies avec le protocole P3P (il semble qu'à part cela, aucun moyen plus efficace n'ait été trouvé), mais parfois nous ne le savons pas. Si la page iframe a été exécutée, existe-t-il un moyen de déterminer si la page dans l'iframe a été chargée ?

iframe1.html :

<html>
<head>
  <title>框架内页</title>
</head>
<body>
  <div>
    <input id="txt" name="txt" type="text" value="3秒钟后这里会变成ok" />
  </div>
  <script type="text/javascript">
    setTimeout("SetValue()",3000);
    function SetValue(){
      document.getElementById("txt").value="ok";
    }
  </script>
</body>
</html>

iframe2.html : 

<html>
<head>
  <title>框架内页</title>
</head>
<body>
  <div>
    <input id="txt" name="txt" type="text" value="6秒钟后这里会变成ok" />
  </div>
  <script type="text/javascript">
    setTimeout("SetValue()",6000);
    function SetValue(){
      document.getElementById("txt").value="ok";
    }
  </script>
</body>
</html>

index.html :

<html>
<head>
  <title>检测本页中的所有iframe是否加载完成</title>
  <script type="text/javascript">
//得取iframe中的某个html控件值
function getIframeControlValue(iframeId,controlId){
  var ofrm = document.getElementById(iframeId).document;
  if (ofrm==undefined)
  {
    ofrm = document.getElementById(iframeId).contentWindow.document;
    var ff = ofrm1.getElementById(controlId).value;
    return ff;
  }
  else
  {
    var ie = document.frames[iframeId].document.getElementById(controlId).value;
    return ie;
  } 
}
//检测所有的iframe是否"加载"完成
function fnLoadOk(){
  var b = true;
  for(var i=1;i<=2;i++){
    if (getIframeControlValue("frame" + i,"txt")=="ok"){
      b = b && true;
    }
    else
    {
      b = b && false;
    }
  }
  return b;
}
//设置回答显示区的值
function setValue(str){
  if (str!=null && str.length>0){
    document.getElementById("result").innerHTML = "<span style='color:red'>" + new Date().toLocaleString() + " " + str + "</span>";
  }
  else{
    document.getElementById("result").innerHTML = "<span style='color:green'>" + new Date().toLocaleString() + " 正在加载" + "</span>";
  }  
}
var _check = setInterval("t()",500);//每隔0.5秒检查一次
function t(){
  if (fnLoadOk()){
    clearInterval(_check);//加载完成后，清除定时器
    setValue("加载完成!");
  }
  else{
    setValue();
  }
}
</script>
</head>
<body>
<h3>检测本页中的iframe是否加载完成</h3>
<iframe name="frame1" id="frame1" src="iframe1.html" frameborder="1" height="60" width="180"></iframe>
<iframe name="frame2" id="frame2" src="iframe2.html" frameborder="1" height="60" width="180"></iframe>
<div id="result" style="margin:10px;">
准备就绪
</div>
</body>
</html>

Il est à noter que l'exemple de cet article est détecté dans l'événement clic sur le bouton. Si vous prévoyez de démarrer la détection dès l'ouverture de la page, il doit être placé dans l'événement onload du corps de la page index.html. , sinon une exception se produira (la raison est que index.html n'a pas encore été chargé. À ce moment-là, nous nous précipitons pour obtenir le contenu du cadre, et ce que nous obtenons est indéfini ou nul)

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

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
Article précédent：Exemple complet de filtrage js de compétences HTML tags_javascriptArticle suivant：Exemple complet de filtrage js de compétences HTML tags_javascript

Articles Liés

Voir plus