判断iframe是否加载成功一般可以通过以下几种方法:
1. 使用iframe的onload事件
在iframe页面加载完成后触发onload事件,可以使用此事件判断页面是否加载完成。
示例代码如下:
<iframe id="test_iframe" src="test.html" onload="onIframeLoad()"></iframe>
<script>
function onIframeLoad() {
var iframe = document.getElementById("test_iframe");
console.log("iframe页面加载完成", iframe.contentDocument); // 在控制台输出iframe页面文档内容
}
</script>
2. 使用setInterval轮询iframe的内容
如果iframe的onload事件无法被触发,可以考虑使用setInterval轮询iframe的内容,判断是否加载完成。
示例代码如下:
<iframe id="test_iframe" src="test.html"></iframe>
<script>
var intervalId = setInterval(function() {
var iframe = document.getElementById("test_iframe");
try {
var contentDocument = iframe.contentDocument;
clearInterval(intervalId); // 如果可以获取到contentDocument,说明iframe加载完成,可以停止轮询
console.log("iframe页面加载完成", contentDocument); // 在控制台输出iframe页面文档内容
} catch(e) {
console.log("iframe页面未加载完成"); // 如果无法获取contentDocument,说明iframe页面未加载完成
}
}, 1000); // 每隔1秒轮询一次
</script>
3. 在iframe页面中使用window.parent通信
如果iframe和父页面在同一域名下,可以在iframe页面中使用window.parent通信,向父页面发送消息,通知父页面iframe已经加载完成。
示例代码如下:
<!-- 父页面 -->
<iframe id="test_iframe" src="test.html"></iframe>
<script>
window.addEventListener("message", function(event) {
if (event.data === "iframeLoaded") {
console.log("iframe页面加载完成"); // 在控制台输出结果
}
});
// 在iframe加载完成后向父页面发送消息
var iframe = document.getElementById("test_iframe");
iframe.addEventListener("load", function() {
window.parent.postMessage("iframeLoaded", "*");
});
</script>
<!-- iframe页面 -->
<script>
// 在iframe加载完成后向父页面发送消息
window.addEventListener("load", function() {
window.parent.postMessage("iframeLoaded", "*");
});
</script>
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:基于JS判断iframe是否加载成功的方法(多种浏览器) - Python技术站