JavaScript在A页面判断B页面加载完毕（iframe load）

今天遇到一个需求，在A页面上判断Ｂ页面是否加载完毕（Ｂ页面是第三方页面），加载完毕时隐藏loading动画。。。

而平时我们一般做的事是在Ｂ页面上判断Ｂ页面是否加载完毕，进行操作。

if(document.readyState == 'Loaded'){
    // 我们的操作
    //页面加载readyState的五种状态 原文如下:
    //0: (Uninitialized) the send( ) method has not yet been invoked.
    //0 － （未初始化）还没有调用send()方法
    //
    //1: (Loading) the send( ) method has been invoked, request in progress.
    //1 － （载入）已调用send()方法，正在发送请求
    //2: (Loaded) the send( ) method has completed, entire response received.
    //2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
    //3: (Interactive) the response is being parsed. 4: (Completed) the response has been parsed, is ready for harvesting.
    //3 － （交互）正在解析响应内容
    //
    //4: (Completed) the response has been parsed, is ready for harvesting.
    //4 － （完成）响应内容解析完成，可以在客户端调用了
}。

　那么在Ａ页面做Ｂ页面（新页面）的加载判断，据我所知，这是做不到（也许是我不知道有其他更高明的方法），随采用了iframe的方式去做。在Ｂ页面嵌套在Ａ页面里，就可以做了。
ＰＳ：一些框架，如ＮＧ，ＳＵＩ等里面貌似可以做（我没有去尝试，为了一个loading引入一个大框架，血亏啊）。
话不多说，主要代码如下，
完整ｄｅｍｏ下载地址：https://pan.baidu.com/s/1o8yJLm6(包括了loading)
主要代码： 
ＨＴＭＬ：

<iframe id="frame" frameborder="0" src="">
</iframe>

ＪＳ：

iframe_load: function () {

//兼容IE７－８

    if ($('#frame')[0].attachEvent) {
        $('#frame')[0].attachEvent('onload', function () {
            $('#frame').show();
            $('#loading').hide();
        })
    } else {
        $('#frame')[0].onload = function () {
            $('#loading').hide();
            $('#frame').show();
        }
    }
},
ＣＳＳ：

#frame{
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

本身ＪＱ也有ｌｏａｄ，但是本人没用成功，一直报错，报错ＪＱ的东西。
试过＄．ｌｏａｄ（），但是遇到跨域问题。

巴特西

JavaScript在A页面判断B页面加载完毕（iframe load）

最新文章

热门文章