我如何检测是否加载了iframe?

我正试图检查用户点击一个button后,是否加载了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> 

有什么build议么?

顺便说一下,我的iframe是dynamic创build的。 它不会加载初始页面加载。

你可以试试这个(使用jQuery

 $(function(){ $('#MainPopupIframe').load(function(){ $(this).show(); console.log('laod the iframe') }); $('#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> 

我想像这样:

 <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>