[javascript] iframe이로드되었는지 또는 콘텐츠가 있는지 확인하는 방법은 무엇입니까?
id = “myIframe”인 iframe이 있고 여기에 콘텐츠를로드하는 코드가 있습니다.
$('#myIframe').attr("src", "my_url");
문제는 때로는 로딩에 너무 오래 걸리고 때로는 매우 빠르게 로딩된다는 것입니다. 그래서 “setTimeout”함수를 사용해야합니다.
setTimeout(function(){
if (//something shows iframe is loaded or has content)
{
//my code
}
else
{
$('#myIframe').attr("src",""); //stop loading content
}
},5000);
내가 알고 싶은 것은 iFrame이로드되었는지 또는 콘텐츠가 있는지 확인하는 방법입니다. 사용 iframe.contents().find()
이 작동하지 않습니다. 사용할 수 없습니다 iframe.load(function(){})
.
답변
이 시도.
<script>
function checkIframeLoaded() {
// Get a handle to the iframe element
var iframe = document.getElementById('i_frame');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// Check if loading is complete
if ( iframeDoc.readyState == 'complete' ) {
//iframe.contentWindow.alert("Hello");
iframe.contentWindow.onload = function(){
alert("I am loaded");
};
// The loading is complete, call the function we want executed once the iframe is loaded
afterLoading();
return;
}
// If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds
window.setTimeout(checkIframeLoaded, 100);
}
function afterLoading(){
alert("I am here");
}
</script>
<body onload="checkIframeLoaded();">
답변
친절하게 사용 :
$('#myIframe').on('load', function(){
//your code (will be called once iframe is done loading)
});
표준이 변경됨에 따라 내 대답을 업데이트했습니다.
답변
나는 동일한 문제가 있었고 이것에 추가하여 교차 도메인 정책에 관계없이 iframe이로드되었는지 확인해야했습니다. 웹 페이지에 특정 스크립트를 삽입하고 상위 페이지의 일부 콘텐츠를 iframe에 표시하는 크롬 확장 프로그램을 개발하고있었습니다. 나는 다음 접근 방식을 시도했고 이것은 나를 위해 완벽하게 작동했습니다.
추신 : 제 경우에는 iframe의 콘텐츠를 제어 할 수 있지만 상위 사이트에서는 제어 할 수 없습니다. (Iframe은 내 서버에서 호스팅됩니다.)
첫째 : 속성이
있는 iframe을 다음과data-
같이 만듭니다 (이 부분은 내 경우 삽입 된 스크립트에 있음).
<iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"></iframe>
이제 iframe 코드에서 다음을 사용합니다.
var sourceURL = document.referrer;
window.parent.postMessage('1',sourceURL);
이제 내 경우에 따라 삽입 된 스크립트로 돌아갑니다.
setTimeout(function(){
var myIframe = document.getElementById('myiframe');
var isLoaded = myIframe.prop('data-isloaded');
if(isLoaded != '1')
{
console.log('iframe failed to load');
} else {
console.log('iframe loaded');
}
},3000);
과,
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
if(event.origin !== 'https://someWebsite.com') //check origin of message for security reasons
{
console.log('URL issues');
return;
}
else {
var myMsg = event.data;
if(myMsg == '1'){
//8-12-18 changed from 'data-isload' to 'data-isloaded
$("#myiframe").prop('data-isloaded', '1');
}
}
}
질문에 정확하게 대답하지 않을 수도 있지만 실제로이 방법으로 해결 한이 질문의 가능한 경우입니다.
답변
가장 쉬운 옵션 :
<script type="text/javascript">
function frameload(){
alert("iframe loaded")
}
</script>
<iframe onload="frameload()" src=...>
답변
iframe의 load
이벤트를 사용하여 iframe이로드 될 때 응답 할 수 있습니다 .
document.querySelector('iframe').onload = function(){
console.log('iframe loaded');
};
이것은 올바른 콘텐츠가로드되었는지 여부를 알려주지 않습니다.이를 확인하려면 contentDocument
.
document.querySelector('iframe').onload = function(){
var iframeBody = this.contentDocument.body;
console.log('iframe loaded, body is: ', body);
};
contentDocument
iframe이src
코드가 실행중인 도메인과 다른 도메인을 가리키는 경우 확인이 작동하지 않습니다 .
답변
로드되었는지 여부를 감지 할 수 있는지 확실하지 않지만로드가 완료되면 이벤트를 실행할 수 있습니다.
$(function(){
$('#myIframe').ready(function(){
//your code (will be called once iframe is done loading)
});
});
편집 : Jesse Hallett이 지적했듯이 iframe
이미로드 된 경우에도로드 되면 항상 실행됩니다 . 따라서 기본적으로 iframe
가 이미로드 된 경우 콜백이 즉시 실행됩니다.
답변
제 경우에는 교차 출처 프레임이었고 가끔로드되지 않았습니다. 나를 위해 일한 해결책은 다음과 같습니다. 성공적으로로드되면이 코드를 시도하면 :
var iframe = document.getElementsByTagName('iframe')[0];
console.log(iframe.contentDocument);
contentDocument
교차 출처 오류 에 액세스 하고 던지는 것을 허용하지 않지만 프레임이 성공적으로로드되지 않으면 객체 contentDocument
를 반환 #document
합니다.