我如何检测是否加载了iframe？ [英] How can I detect whether an iframe is loaded?

问题描述

我有

我有一个按钮， pre $ $（'＃MainPopupIframe'）。load（function（）{
console.log（'load the iframe'）
//控制台不会即使加载iframe也能显示任何内容。
}）


HTML

 < button id ='click'>点击我< / button> 
 
 //在用户单击按钮后创建iframe。 
< iframe id ='MainPopupIframe'src ='http：// ...'/> ;...</iframe> 
  

有什么建议吗？

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

解决方案

你可以试试这个（使用 jQuery ）

< '（'＃click'）。on（'click'，function（'）'）。 ）{$（'＃MainPopupIframe'）。attr（'src'，'https://heera.it'）;}）;}）;

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min点击我< / button>< iframe style =display：noneid ='MainPopupIframe'src =''/>< / iframe>  

$ b

jsfiddle DEMO 。
$ b 更新：使用plain 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' >点击我< / button>< iframe style =display：noneid ='MainPopupIframe'src =''/>< / iframe>

jsfiddle DEMO 。

更新：您也可以试试这个（动态iframe） b

）{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 ='点击'>点击我< /按钮>< ; / b>

/jsfiddle.net/heera/umYkV/121/rel =noreferrer> jsfiddle DEMO 。

I am trying to check whether an iframe has loaded after the user clicks a button.

I have

$('#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>

Any suggestions?

By the way, my iframe is created dynamically. It doesn’t load with the initial page load.

解决方案

You may try this (using 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.

Update: Using plain 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.

Update: Also you can try this (dynamic 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.

这篇关于我如何检测是否加载了iframe？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！