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은 동적으로 생성됩니다. 초기 페이지로드와 함께로드되지 않습니다.

— 연지
소스

클릭

— Viktor S.

답변:

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 데모 .

업데이트 : 일반 사용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 데모 .

업데이트 : 또한 이것을 시도 할 수 있습니다 (동적 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 데모 .

— 알파
소스

바닐라 솔루션은 굉장합니다.

— Nick

load()더 이상 사용되지 않지만 ajax 함수와 충돌했기 때문입니다. 권장되는 대체 방법은 간단 on("load")합니다. (불행히도 문서는 그게 당신이해야 할 전부라는 것을 분명하게 밝히지 않습니다.)

— Teepeemm

"laod the iframe"-알파 | 유산을 보호하기 위해 계속되는 멋진 잠복 편집 게릴라전 : P

— Mohd Abdul Mujib

좋은 캐치 @MohdAbdulMujib, 이제 고전적인 것입니다 :-)

— The Alpha

추가 된 요소를 만드는 방법은 전에 본 적이 없습니다. 사랑스럽고 완전히 해결되었습니다. 잘 하셨어요!

— indextwo 2018

나는 이것을 다음과 같이 상상한다.

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

— 데 시슬 라프 카메 노프
소스

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