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

检测iframe加载完成

最新推荐文章于 2021-03-27 05:52:27 发布

最新推荐文章于 2021-03-27 05:52:27 发布 · 106 阅读

文章标签：

#javascript #ViewUI

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

url:http://www.eyejs.com/html/85/n-285.html

发布: 2009-9-16 13:20|作者: 选择多灵活多

这其实是上一篇"iframe框架取值兼容ie/firefox/chrome的写法"的扩展应用:

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

iframe1.html:

iframe1.html
<html>
<head>
<title>框架内页</title>
</head>
<body>
<div>
<inputid="txt"name="txt"type="text"value="3秒钟后这里会变成ok

"/>
</div>

<scripttype="text/javascript">
setTimeout("SetValue()",3000);

functionSetValue(){
document.getElementById("txt").value="ok";
}
</script>
</body>
</html>

iframe2.html：

< html >
< head >
< title > 框架内页 </ title >
</ head >
< body >
< div >
< inputid = " txt " name = " txt " type = " text " value = " 6秒钟后这里会变成ok

" />
</ div >

< scripttype = " text/javascript " >
setTimeout( " SetValue() " , 6000 );

functionSetValue(){
document.getElementById( " txt " ).value = " ok " ;
}
</ script >
</ body >
</ html >

index.html:

< html >
< head >
< title > 检测本页中的所有iframe是否加载完成 </ title >
< scripttype = " text/javascript " >
// 得取iframe中的某个html控件值
functiongetIframeControlValue(iframeId,controlId){
varofrm = document.getElementById(iframeId).document;
if (ofrm == undefined)
{
ofrm = document.getElementById(iframeId).contentWindow.document;
varff = ofrm1.getElementById(controlId).value;
return ff;
}
else
{
varie = document.frames[iframeId].document.getElementById(controlId).value;
return ie;
}
}

// 检测所有的iframe是否"加载"完成
functionfnLoadOk(){
varb = true ;
for (vari = 1 ;i <= 2 ;i ++ ){
if (getIframeControlValue( " frame " + i, " txt " ) == " ok " ){
b = b && true ;
}
else
{
b = b && false ;
}
}
return b;
}

// 设置回答显示区的值
functionsetValue(str){
if (str != null && str.length > 0 ){
document.getElementById( " result " ).innerHTML = " <spanstyle='color:red'> " + new Date().toLocaleString() + " " + str + " </span> " ;
}
else {
document.getElementById( " result " ).innerHTML = " <spanstyle='color:green'> " + new Date().toLocaleString() + " 正在加载

" + " </span> " ;
}
}

var_check = setInterval( " t() " , 500 ); // 每隔0.5秒检查一次

functiont(){
if (fnLoadOk()){
clearInterval(_check); // 加载完成后，清除定时器
setValue( " 加载完成! " );
}
else {
setValue();
}
}
</ script >
</ head >
< body >

< h3 > 检测本页中的iframe是否加载完成 </ h3 >
< iframename = " frame1 " id = " frame1 " src = " iframe1.html " frameborder = " 1 " height = " 60 " width = " 180 " ></ iframe >
< iframename = " frame2 " id = " frame2 " src = " iframe2.html " frameborder = " 1 " height = " 60 " width = " 180 " ></ iframe >

< divid = " result " style = " margin:10px; " >
准备就绪