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

如何检测本页中的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>
        
<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)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值