javascript - jQuery:检测 X 部分后未加载的 iFrame

Question

我正在从另一个域的模态窗口中加载 iFrame，但有时该框架无法加载，或者需要 20 秒以上的时间才能加载。这是代码:

HTML:

<div id="mask">
    <div id="iframe_lightbox">
        <div id="iframe_container"><iframe id="patternCoolerIframe" style="width: 100%; height: 100%;" src="" frameborder="0" ></iframe></div>
        <div id="iframe_lightbox_close">X</div>
    </div>
</div>

JS:

function launch_iFrame(iframeSrc, iframeID){
        $("#mask").fadeTo('500', 1, function () {

        $('<iframe>', {
           src: iframeSrc,
           id:  'iframeID',
           frameborder: 0,
           scrolling: 'no',
           width: '100%',
           height: iFrameH+'px'
        }).appendTo('#iframe_container');
    });
}

如何检测 X 秒后内容是否尚未加载到 iframe 中？我想向用户显示一条消息，或者刷新页面。

Answer 1

您可以使用计时器并检查 onload 处理程序是否已触发

function launch_iFrame(iframeSrc, iframeID){

    var timer = setTimeout(function() {
        alert('The iFrame didn\'t load in five seconds !');
    }, 5000);

    $("#mask").fadeTo('500', 1, function () {

        $('<iframe>', {
            src         : iframeSrc,
            id          : 'iframeID',
            frameborder : 0,
            scrolling   : 'no',
            width       : '100%',
            height      : iFrameH+'px',
            on          : {
                load : function() {
                    clearTimeout(timer); // remove timer when iFrame loads
                }
            }
         }).appendTo('#iframe_container');
     });
}