JS判断页面所有Iframe是否全部请求完成加载完成

最新推荐文章于 2018-09-13 15:39:00 发布

原创最新推荐文章于 2018-09-13 15:39:00 发布 · 8.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #自动测试

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种在自动测试中判断页面及其内部iframe是否完全加载的方法。通过检查iframe的URL状态和使用不同浏览器下的加载事件，确保在进行下一步操作前页面已完全呈现。

自己发了个帖，自己解决了。

http://bbs.youkuaiyun.com/topics/391059575

情景：在自动测试中，要等待页面完全加载后才能进行下一步操作，判断页面加载完成了，只能说明页面已经请求完成到本地的内容，如果判断的时候还有内容因为网速等原因没有请求到本地。

 function GetFrameState(frm) {
            var framedoc = frm.document || frm.contentWindow.document;
            var ret = false;
            console.log(framedoc.readyState);
            if (framedoc.readyState == 'complete') {
                ret = true;
                var frms = frm.frames;
                if (frms && frms.length > 0) {
                    for (var i = 1; i < frms.length; i++) {
                        if (frms[i].document.URL == 'about:blank')         //current iframe request unfinished.
                            return false;
                        console.log(frms[i].document.URL);
                        if (frms[i].attachEvent) {                         //document is loading for IE .
                            frms[i].attachEvent("onload", function () {
                                return false;
                            });
                        }
                        else {                                             //document is loading for other browsers .
                            frms[i].onload = function () {
                                return false;
                            };
                        }
                    }
                }
            }
            return ret;
        }

        GetFrameState(window.top);

这里处理的方法是：

到得所有Iframe，然后获取Iframe的URL,判断是否为空，为空的话说明还在等待服务器响应，这样处理的方法还是有点误差，不过测试发现影响还不是很大，所以就用这方法了。如有更好的方法请赐教。

后面判断Iframe加载是否完成是参考网上的资料：

一般来说，我们判断 iframe 是否加载完成其实与判断 JavaScript 文件是否加载完成采用的方法很类似：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == "complete"){
            alert("Local iframe is now loaded.");
        }
    };
}

document.body.appendChild(iframe);

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

document.body.appendChild(iframe);