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

最新推荐文章于 2022-06-13 16:39:44 发布

weixin_34007020

最新推荐文章于 2022-06-13 16:39:44 发布

阅读量119

点赞数

文章标签： javascript ViewUI

这其实是上一篇"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; " >
准备就绪