如何检测是否已加载iframe？

101

我正在尝试检查用户单击按钮后是否已加载iframe。

我有

$('#MainPopupIframe').load(function(){
    console.log('load the iframe')
    //the console won't show anything even if the iframe is loaded.
})

的HTML

<button id='click'>click me</button>

//the iframe is created after the user clicks the button.
<iframe id='MainPopupIframe' src='http://...' />...</iframe>

有什么建议？

顺便说一下，我的iframe是动态创建的。它不会随初始页面加载一起加载。

— 胭脂
source

点击

— Viktor S.

Answers:

185

您可以尝试使用（jQuery）

$(function(){
    $('#MainPopupIframe').load(function(){
        $(this).show();
        console.log('iframe loaded successfully')
    });
        
    $('#click').on('click', function(){
        $('#MainPopupIframe').attr('src', 'https://heera.it');    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='click'>click me</button>

<iframe style="display:none" id='MainPopupIframe' src='' /></iframe>

展开摘要

jsfiddle DEMO。

更新：使用普通格式javascript

window.onload=function(){
    var ifr=document.getElementById('MainPopupIframe');
    ifr.onload=function(){
        this.style.display='block';
        console.log('laod the iframe')
    };
    var btn=document.getElementById('click');    
    btn.onclick=function(){
        ifr.src='https://heera.it';    
    };
};

<button id='click'>click me</button>

<iframe style="display:none" id='MainPopupIframe' src='' /></iframe>

展开摘要

jsfiddle DEMO。

更新：您也可以尝试一下（动态iframe）

$(function(){
    $('#click').on('click', function(){
        var ifr=$('<iframe/>', {
            id:'MainPopupIframe',
            src:'https://heera.it',
            style:'display:none;width:320px;height:400px',
            load:function(){
                $(this).show();
                alert('iframe loaded !');
            }
        });
        $('body').append(ifr);    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='click'>click me</button><br />

展开摘要

jsfiddle DEMO。

— 阿尔法
source

香草的解决方案很棒。

— 尼克

load()已弃用，但这仅是因为它与ajax函数冲突。推荐的替换方法很简单on("load")。（不幸的是，文档并不太清楚这就是您需要做的全部。）

— Teepeemm 2014年

“给iframe装上礼物”-Alpha | 为保护遗产而进行的

— 精美的小规模

好消息@MohdAbdulMujib，它现在是经典的:-)

— Alpha

我以前从未见过用于创建附加元素的方法。很可爱，为我彻底解决了。干得好！

— indextwo

我想像这样：

<html>
<head>
<script>
var frame_loaded = 0;
function setFrameLoaded()
{
   frame_loaded = 1;
   alert("Iframe is loaded");
}
$('#click').click(function(){
   if(frame_loaded == 1)
    console.log('iframe loaded')
   } else {
    console.log('iframe not loaded')
   }
})
</script>
</head>
<button id='click'>click me</button>

<iframe id='MainPopupIframe' onload='setFrameLoaded();' src='http://...' />...</iframe>

— 德西斯拉夫·卡梅诺夫（Desislav Kamenov）
source

您也可以尝试onload事件；

var createIframe = function (src) {
        var self = this;
        $('<iframe>', {
            src: src,
            id: 'iframeId',
            frameborder: 1,
            scrolling: 'no',
            onload: function () {
                self.isIframeLoaded = true;
                console.log('loaded!');
            }
        }).appendTo('#iframeContainer');

    };

— Teoman Shipahi
source