如何检测本页中的iframe是否“加载”完成

这其实是上一篇"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)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏代码小睿

从 art-template 模版维护到动态加载的思考

  自己用 art-template 有些年头了,最近在培养团队学习 art-template 使用,发现有一个痛点比较难解决。   比如有一个模版,我们可以直...

30690
来自专栏智能大石头

魔方NewLife.Cube升级v2.0

 魔方是一套集成权限管理的MVC管理后台,最具特色功能是模版覆盖机制,是XCode实体类的最佳搭档! v2.0.2017.1126   借助Ajax支持高级操作...

23290
来自专栏积累沉淀

JavaScript 事件基础补充

JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击。当用户执行某些操作的时候,再去执行一系列代码。 一.事件介绍 JavaScri...

28750
来自专栏葡萄城控件技术团队

你不可不知的HTML优化技巧

如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。 很显然HTML 已经达到了一个瓶颈...

26360
来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

介绍 我们已经使用基本的 HTML 编写了一个网页。但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力。 ? 如何改善这种很平淡的页面呢? 让我们开始...

39270
来自专栏葡萄城控件技术团队

一套内容采集系统 解放编辑人员

内容采集系统,对于以内容为主的网站来说是非常好的助手,除了原创内容外,其它内容需要编辑人员或者采集系统来收集整理,然后添加到自己的网站里。Discuz DvBB...

432100
来自专栏葡萄城控件技术团队

ASP.NET MVC 5 - 视图

在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML。 您将创建一个视图模板文件...

31780
来自专栏积累沉淀

初识HtmlParser

1、概念 网页解析,即程序自动分析网页内容、获取信息,从而进一步处理信息。 htmlparser包提供方便、简洁的处理html文件的方法,它将html页面中...

25450
来自专栏施炯的IoT开发专栏

转帖-《你写软件我推广 — 微软 & WPMind 社区合作计划》

    本文的内容转自张欣的BLog:http://www.cnblogs.com/twodays/archive/2010/05/31/1747809.htm...

21970
来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(1) – 编写第一行代码

介绍 网络时代已经到来。现在对人们来说,每天上网冲浪已经成为一种最为常见的行为。 在网页浏览器中输入一段文本地址,就像http://www.codeprojec...

30060

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励