Rumah > Artikel > hujung hadapan web > js untuk mengesan sama ada iframe adalah kemahiran loaded_javascript

js untuk mengesan sama ada iframe adalah kemahiran loaded_javascript

WBOYasal: 2016-05-16 15:29:391061semak imbas

Contoh dalam artikel ini menerangkan kaedah js mengesan sama ada iframe dimuatkan. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Berikut ialah aplikasi sambungan berikutan artikel sebelumnya "Kaedah JS untuk melaksanakan nilai bingkai iframe (serasi dengan IE, firefox, chrome, dll.) ":

Senario aplikasi: Salah satu aplikasi iframe yang paling unik pada pendapat saya ialah ia boleh mencapai penulisan kuki merentas domain dengan protokol P3P (nampaknya selain daripada ini, cara yang lebih berkesan belum ditemui), tetapi kadangkala kita tidak tahu ini Sama ada halaman iframe telah dilaksanakan, adakah terdapat sebarang cara untuk menentukan sama ada halaman dalam iframe telah dimuatkan?

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>

Perlu diperhatikan bahawa contoh dalam artikel ini dikesan dalam acara klik butang Jika anda bercadang untuk memulakan pengesanan sebaik sahaja halaman dibuka, ia mesti diletakkan dalam acara onload badan halaman index.html. , jika tidak, pengecualian akan berlaku ( Sebabnya ialah index.html belum dimuatkan lagi. Pada masa ini, kami tergesa-gesa untuk mendapatkan kandungan bingkai, dan apa yang kami dapat adalah tidak ditentukan atau batal)

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Contoh lengkap js menapis kemahiran HTML tags_javascriptArtikel seterusnya：Contoh lengkap js menapis kemahiran HTML tags_javascript

Artikel berkaitan

Lihat lagi