JS(다양한 브라우저) 기반으로 iframe이 성공적으로 로드되었는지 확인하는 방법

추천 자료:

JS iFrame의 느린 로딩을 해결하는 방법

프로젝트에서는 iframe을 동적으로 추가한 다음 추가된 iframe에서 관련 작업을 수행해야 하는 경우가 많지만, 종종 iframe이 아직 추가되지 않은 경우 다음 코드가 이미 실행되었으므로 작성한 내용 중 일부가 전혀 표시되지 않습니다. 이때 후속 작업을 수행하기 전에 iframe이 로드될 때까지 기다릴 수 있는지 고려해야 합니다. 물론 다양한 브라우저가 이미 이를 고려했습니다. 아래를 참조하세요.

ie 브라우저

IE의 각 요소 노드에는 onreadystatechange 이벤트가 있습니다. 이 이벤트는 요소 콘텐츠가 변경될 때마다 트리거됩니다. 예를 들어 로딩은 콘텐츠가 로드될 때 트리거되고, 로드는 콘텐츠가 로드될 때 트리거됩니다. 콘텐츠가 성공적으로 로드된 경우 이 함수는 IE의 모든 요소가 소유한 속성인 ReadyState와 협력해야 하며 각 트리거의 상태를 확인하는 데 사용됩니다.

//先为iframe 添加一个 onreadystatechange
iframe.attachEvent("onreadystatechange", function(){
//此事件在内容没有被载入时候也会被触发，所以我们要判断状态
//有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断
if(iframe.readyState === "complete" || iframe.readyState == "loaded"){
//代码能执行到这里说明已经载入成功完毕了
//要清除掉事件
iframe.detachEvent( "onreadystatechange", arguments.callee);
//这里是回调函数
}
});

다른 브라우저(Firefox, Opera, chrome 등)

IE 이외의 다른 브라우저에서는 Firefox, Opera, chrome 등의 iframe에서 onload 이벤트가 발생합니다. 이 이벤트는 트리거되면 콘텐츠가 로드되었다고 표시됩니다.

iframe.addEventListener( "load", function(){
//代码能执行到这里说明已经载入成功完毕了
this.removeEventListener( "load", arguments.call, false);
//这里是回调函数
}, false);

요약

if(iframe.attachEvent){
iframe.attachEvent("onreadystatechange", function() {
//此事件在内容没有被载入时候也会被触发，所以我们要判断状态
//有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断
if (iframe.readyState === "complete" || iframe.readyState == "loaded") {
//代码能执行到这里说明已经载入成功完毕了
//要清除掉事件
iframe.detachEvent("onreadystatechange", arguments.callee);
//这里是回调函数
}
});
}else{
iframe.addEventListener("load", function() {
//代码能执行到这里说明已经载入成功完毕了
this.removeEventListener("load", arguments.call, false);
//这里是回调函数
}, false);
}

참고: 위 함수는 appendChild가 본문에 추가된 후 iframe에 배치되어야 합니다. 그렇지 않으면 트리거되지 않습니다.

위 내용은 작습니다. 편집자가 iframe이 성공적으로 로드되었는지 확인하는 JS 방법을 소개합니다. 도움이 되길 바랍니다.

JS(다양한 브라우저)를 기반으로 iframe이 성공적으로 로드되었는지 확인하는 방법에 대한 자세한 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!