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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
js导出txt示例代码
Jan 14 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
插件导致ECharts被全量引入的坑示例解析
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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
php 数据结构之链表队列
2017/10/17 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
javascript里的条件判断
2007/02/27 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
Python内置数据类型详解
2014/08/18 Python
python实现音乐下载器
2018/04/15 Python
对python的输出和输出格式详解
2018/12/08 Python
python把转列表为集合的方法
2019/06/28 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
2014中学教师节广播稿
2014/09/10 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript