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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
javascript数组排序汇总
Jul 07 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
JS随机密码生成算法
Sep 23 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 更新数据库中断的解决方法
2009/06/05 PHP
php自定义session示例分享
2014/04/22 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python 查看文件的读写权限方法
2018/01/23 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python 公共方法汇总解析
2019/09/16 Python
python爬虫 正则表达式解析
2019/09/28 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
python实现TCP文件传输
2020/03/20 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
自荐书格式
2013/12/01 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
放假通知范文
2015/04/14 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript