suchen

Heim  >  Artikel  >  Web-Frontend  >  js-Methode zum Erkennen, ob Iframe geladen ist_Javascript-Kenntnisse

js-Methode zum Erkennen, ob Iframe geladen ist_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:29:391108Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode, mit der js erkennt, ob der Iframe geladen ist. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist eine Erweiterungsanwendung im Anschluss an den vorherigen Artikel „JS-Methode zur Implementierung des Iframe-Frame-Werts (kompatibel mit IE, Firefox, Chrome usw.) “:

Anwendungsszenario: Eine der einzigartigsten Anwendungen von iframe ist meiner Meinung nach, dass es mit dem P3P-Protokoll das domänenübergreifende Schreiben von Cookies erreichen kann (es scheint, dass abgesehen davon kein effektiverer Weg gefunden wurde). Aber manchmal wissen wir das nicht. Gibt es eine Möglichkeit festzustellen, ob die Seite im Iframe geladen wurde, ob die Iframe-Seite ausgeführt wurde?

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>

Es ist erwähnenswert, dass das Beispiel in diesem Artikel im Button-Click-Ereignis erkannt wird. Wenn Sie die Erkennung starten möchten, sobald die Seite geöffnet wird, muss sie im Onload-Ereignis des index.html-Seitenkörpers platziert werden Andernfalls tritt eine Ausnahme auf (Der Grund dafür ist, dass index.html noch nicht geladen wurde. Zu diesem Zeitpunkt beeilen wir uns, den Inhalt des Frames abzurufen, und was wir erhalten, ist undefiniert oder null)

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vollständiges Beispiel für JS-Filterung von HTML-Tags_Javascript-KenntnissenNächster Artikel：Vollständiges Beispiel für JS-Filterung von HTML-Tags_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen