반응형
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)
$(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
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>업데이트 : 이것도 시도해 볼 수 있습니다 (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 />저는 이렇게 생각합니다.
<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>
온로드 이벤트도 시도해 볼 수 있습니다.
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');
};
언급URL : https://stackoverflow.com/questions/12267010/how-can-i-detect-whether-an-iframe-is-loaded
반응형
'programing' 카테고리의 다른 글
| WordPress: meta_query가 있는 게시물 제외 - 모든 게시물에 meta_field가 있는 것은 아닙니다. (0) | 2023.10.29 |
|---|---|
| MySQL 타임스탬프에 NULL 삽입 (0) | 2023.10.24 |
| 날짜별 엔트리 선택 - >= NOW(), MySQL (0) | 2023.10.24 |
| jQuery 객체를 어떻게 비교하시겠습니까? (0) | 2023.10.24 |
| ngIf - 확인 후 식이 변경되었습니다. (0) | 2023.10.24 |