JavaScript 判断 iframe 加载完成的技巧

"该文档提供了一种在JavaScript中判断iframe是否加载完成的详细方法，包括对不同浏览器的兼容处理。" 在JavaScript开发中，有时我们需要知道一个iframe是否已经完全加载了其内容，以便进行后续的操作或者交互。文档提供的是一种判断iframe加载状态的完美方法，适用于各种浏览器环境。 首先，我们可以创建一个新的iframe元素并通过`document.createElement("iframe")`来初始化。然后，设置iframe的`src`属性指向需要加载的页面。例如，`iframe.src = "https://.jb51.net"`。 对于非IE浏览器，我们可以通过监听iframe的`onload`事件来判断加载是否完成。当`onload`事件触发时，说明iframe内容已加载完毕。代码如下： ```javascript var iframe = document.createElement("iframe"); iframe.src = "https://.jb51.net"; iframe.onload = function() { alert("Local iframe is now loaded."); }; document.body.appendChild(iframe); ``` 然而，对于IE浏览器，事件处理方式略有不同。IE不直接支持`onload`事件，而是使用`attachEvent`来监听`onload`。代码如下： ```javascript var iframe = document.createElement("iframe"); iframe.src = "sc.jb51.net"; if (iframe.attachEvent) { iframe.attachEvent("onload", function() { alert("Local iframe is now loaded."); }); } else { iframe.onload = function() { alert("Local iframe is now loaded."); }; } document.body.appendChild(iframe); ``` 文档中提到，`onreadystatechange`事件也可以用来检测iframe的加载状态，但这种方法相比于`onload`存在一些潜在问题。当`readyState`属性变为"complete"时，表示iframe内容加载完成。但是，`onreadystatechange`可能在`onload`之前触发，且不保证所有浏览器都支持此事件。 另外，文档还提到了一些相关的JavaScript和jQuery技术，如动态创建上传表单并通过iframe模拟Ajax实现无刷新提交，以及子父页面之间如何通过js函数进行通信等。这些知识对于理解和使用iframe加载状态的判断方法非常有帮助。 总结来说，正确判断iframe加载完成的方法是关键，因为它直接影响到用户体验和页面交互的流畅性。通过合理地使用`onload`或`onreadystatechange`事件，以及针对IE浏览器的特殊处理，可以确保在所有主要浏览器上正确捕获iframe加载完成的时刻。