js检测iframe是否加载完成的方法


Posted in Javascript onNovember 26, 2015

本文实例讲述了js检测iframe是否加载完成的方法。分享给大家供大家参考,具体如下:

这里是继上一篇《js实现iframe框架取值的方法(兼容IE,firefox,chrome等)》的扩展应用:

应用场景:iframe个人感觉最独特的应用之一就是配合P3P协议可以实现跨域写入cookie(好象除此之外,还没找到更有效的办法),但是有时候我们不知道这个iframe页面是否执行完毕,有没有办法判断iframe里的页面是否load完成了呢?

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>

值得注意的是:本文中的示例是放在按钮click事件中检测的,如果打算页面一打开就开始检测,一定要放在index.html页body的onload事件中,否则会出异常(原因是index.html尚未加载完成,这时就急着获取框架的内容,得到的是undefined或null)

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
详细讲解JS节点知识
Jan 31 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
vue组件横向树实现代码
Aug 02 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 #Javascript
深入浅析同源策略和跨域访问
Nov 26 #Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 #Javascript
学习JavaScript设计模式(单例模式)
Nov 26 #Javascript
javascript bom是什么及bom和dom的区别
Nov 26 #Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 #Javascript
Javascript BOM学习小结(六)
Nov 26 #Javascript
You might like
PHP面向对象编程快速入门
2006/10/09 PHP
global.php
2006/12/09 PHP
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python实现汉诺塔递归算法经典案例
2021/03/01 Python
详解Python import方法引入模块的实例
2017/08/02 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python如何测试stdout输出
2020/08/10 Python
Python识别验证码的实现示例
2020/09/30 Python
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
C#笔试题集合
2013/06/21 面试题
某公司部分笔试题
2013/11/05 面试题
应届生妇产科护士求职信
2013/10/27 职场文书
实习求职信
2013/12/01 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
以权谋私检举信范文
2015/03/02 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
世界十大狙击步枪排行榜
2022/03/20 杂记
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python