프레임이 로드되었는지, 내용이 있는지 확인하는 방법은 무엇입니까?
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에서 컨텐츠에 대한 제어권을 가지고 있지만 상위 사이트에서는 제어할 수 없습니다. (frame이 자체 서버에서 호스팅되는 경우)
째:
하여 iframe으로 만들기 data- (내 이 e like 다)
<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다를 .src코드가 실행 중인 영역과 다른 도메인을 가리킵니다.
제 경우에는 교차 origin 프레임이라 가끔 로딩이 되지 않았습니다.제게 도움이 된 해결책은: 성공적으로 로드된 경우 이 코드를 사용해 보십시오.
var iframe = document.getElementsByTagName('iframe')[0];
console.log(iframe.contentDocument);
contentDocument 교차. 오리진을스합니다.contentDocument합니다를 합니다.#document
로드 여부를 감지할 수 있을지는 모르겠지만 로드가 완료되면 이벤트를 실행할 수 있습니다.
$(function(){
$('#myIframe').ready(function(){
//your code (will be called once iframe is done loading)
});
});
편집: Jesse Hallet이 지적한 바와 같이, 이것은 항상 발생할 것입니다.iframe가 로드되었습니다. 이미 로드되었습니다. 본질적으로,iframe이미 로드되었습니다. 콜백이 즉시 실행됩니다.
iFrame을 로드할 때 처음에는 #문서가 들어 있으므로 로드 상태를 확인하는 것이 지금 있는 것을 확인하는 것이 가장 효과적일 수 있습니다.
if ($('iframe').contents().find('body').children().length > 0) {
// is loaded
} else {
// is not loaded
}
iframe이 언제 조작할 준비가 되었는지 알아야 할 경우 간격을 사용합니다.이 경우 250ms마다 콘텐츠를 "ping"하고 대상 iframe 안에 콘텐츠가 있으면 "ping"을 중지하고 조치를 취합니다.
var checkIframeLoadedInterval = setInterval( checkIframeLoaded, 250 );
function checkIframeLoaded() {
var iframe_content = $('iframe').contents();
if (iframe_content.length > 0) {
clearInterval(checkIframeLoadedInterval);
//Apply styles to the button
setTimeout(function () {
//Do something inside the iframe
iframe_content.find("body .whatever").css("background-color", "red");
}, 100); //100 ms of grace time
}
}
[크로스 브라우저를 테스트하지 않았습니다!] 다음과 같이 작동하는 트릭을 얻었습니다.
iframe의 onload 이벤트 처리기 정의:
$('#myIframe').on('load', function() {
setTimeout(function() {
try {
console.log($('#myIframe')[0].contentWindow.document);
} catch (e) {
console.log(e);
if (e.message.indexOf('Blocked a frame with origin') > -1 || e.message.indexOf('from accessing a cross-origin frame.') > -1) {
alert('Same origin Iframe error found!!!');
//Do fallback handling if you want here
}
}
}, 1000);
});면책 사항:SAME Origin IFRAME 문서에 대해서만 작동합니다.
페이지와 iframe을 같은 도메인에서 호스팅하는 경우 iframe의 내용을 들을 수 있습니다.Window.DOMContentLoaded이벤트. 원본 페이지가 실행될 때까지 기다려야 합니다.DOMContentLoaded먼저, 그 다음 a를 첨부합니다.DOMContentLoadediframe의 이벤트 청취자Window.
당신이 다음과 같은 틀을 가지고 있다면,
<iframe id="iframe-id" name="iframe-name" src="..."></iframe>
다음 토막글은 iframe에 접속할 수 있게 해줍니다.DOMContentLoaded이벤트:
document.addEventListener('DOMContentLoaded', function () {
var iframeWindow = frames['iframe-name'];
// var iframeWindow = document.querySelector('#iframe-id').contentWindow
// var iframeWindow = document.getElementById('iframe-id').contentWindow
iframeWindow.addEventListener('DOMContentLoaded', function () {
console.log('iframe DOM is loaded!');
});
});
교차 원점 프레임이 아닌 경우에만 작동합니다.
이렇게 할 수 있습니다.
const $iframe = document.querySelector(`iframe`);
$iframe.addEventListener("load", function () {
console.log("loaded");
});
언급URL : https://stackoverflow.com/questions/9249680/how-to-check-if-iframe-is-loaded-or-it-has-a-content
'code' 카테고리의 다른 글
| Wc_get_products 기능을 WoCommerce에서 사용하기 (0) | 2023.10.10 |
|---|---|
| XML 모범 사례: 특성 대 추가 요소 (0) | 2023.10.10 |
| Angular Directive(각도 지시)의 선택적 매개변수 (0) | 2023.10.05 |
| Date.getDay() javascript가 잘못된 날짜를 반환합니다. (0) | 2023.10.05 |
| AWS 오로라:'지연된 전송/커밋 확인 완료' 프로세스 상태란? (0) | 2023.10.05 |