méthode js pour détecter si l'iframe est chargé_compétences javascript-js tutoriel-php.cn

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

WBOY

Libérer： 2016-05-16 15:29:39

original

1130 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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.