我正在尝试检查用户单击按钮后是否已加载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是动态创建的。它不会随初始页面加载一起加载。
您可以尝试使用(jQuery)
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>
更新: 使用普通格式javascript
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>
更新: 您也可以尝试一下(动态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 />