如何检测iframe是否已加载？

我想检查一下iframe是否在用户单击按钮后加载。如何检测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是动态创建的。它不会加载初始页面加载。

来源

2012-09-04 Rouge

[点击]（http://stackoverflow.com/questions/205087/jquery-ready-in-a-dynamically-inserted-iframe） –

150

这（使用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>

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。

来源

2012-09-04 15:54:55

'负载（）'是已废弃]（HTTP：/ /api.jquery.com/category/deprecated/）？ – adeneo

谢谢答案谢赫。但是，当页面加载时，我没有MainpopupIframe元素可用。 MainpopipIframe是在用户点击按钮后创建的。所以.load函数不适用于我的情况。无论如何归档我需要的结果？谢谢。 +1 – Rouge

@Rouge，尝试更新的答案。你可能会喜欢这个。谢谢:-) –

我想这就像：

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

来源

2012-09-04 15:57:13

您可以尝试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'); 

    };

来源

2017-12-07 22:34:54

如何检测iframe是否已加载？

回答

相关问题