检测在X节之后未加载的iFrame

jQuery: Detect iFrame not loaded after X sections

本文关键字：加载 iFrame 之后 检测      更新时间：2023-09-26

我正在从另一个域加载一个模态窗口中的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中?我想向用户显示一条消息，或者刷新页面。

您可以使用计时器并检查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');
     });
}
相关文章：