zoukankan      html  css  js  c++  java
  • 如何检测本页中的iframe是否“加载”完成

    这其实是上一篇"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)
    作者:菩提树下的杨过
    出处:http://yjmyzz.cnblogs.com
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    Leetcode 349. Intersection of Two Arrays
    hdu 1016 Prime Ring Problem
    map 树木品种
    油田合并
    函数学习
    Leetcode 103. Binary Tree Zigzag Level Order Traversal
    Leetcode 102. Binary Tree Level Order Traversal
    Leetcode 101. Symmetric Tree
    poj 2524 Ubiquitous Religions(宗教信仰)
    pat 1009. 说反话 (20)
  • 原文地址:https://www.cnblogs.com/yjmyzz/p/1496988.html
Copyright © 2011-2022 走看看