基于JS判断iframe加载成功的多浏览器解决方案

基于JS判断iframe是否加载成功的方法（多种浏览器） 在Web开发中，判断iframe是否加载成功是一个常见的问题，特别是在动态添加iframe的情况下。今天，我们将讨论基于JS判断iframe是否加载成功的方法，这些方法适用于多种浏览器。 IE浏览器下的方法 在IE浏览器中，每个elem节点都拥有一个onreadystatechange事件，该事件每次在elem内容发送变化时触发。我们可以使用这个事件来判断iframe是否加载成功。具体来说，我们可以为iframe添加一个onreadystatechange事件，并在事件处理函数中判断readyState的状态。如果readyState的状态为"complete"或"loaded"，那么我们就可以认为iframe已经加载成功了。 ```javascript iframe.attachEvent("onreadystatechange", function() { if (iframe.readyState === "complete" || iframe.readyState === "loaded") { // 代码能执行到这里说明已经载入胜利完毕了 // 要清除掉大事 iframe.detachEvent("onreadystatechange", arguments.callee); // 这里是回调函数 } }); ``` 非IE浏览器下的方法 在非IE浏览器（如Firefox、Opera、Chrome等）中，我们可以使用onload事件来判断iframe是否加载成功。onload事件会在iframe加载完成时触发，我们可以在事件处理函数中执行相应的操作。 ```javascript iframe.addEventListener("load", function() { // 代码能执行到这里说明已经载入胜利完毕了 this.removeEventListener("load", arguments.callee, false); // 这里是回调函数 }, false); ``` 跨浏览器兼容性 为了确保跨浏览器兼容性，我们可以使用以下方法： ```javascript function iframeLoaded(iframe) { if (iframe.attachEvent) { iframe.attachEvent("onreadystatechange", function() { if (iframe.readyState === "complete" || iframe.readyState === "loaded") { // 代码能执行到这里说明已经载入胜利完毕了 // 要清除掉大事 iframe.detachEvent("onreadystatechange", arguments.callee); // 这里是回调函数 } }); } else { iframe.addEventListener("load", function() { // 代码能执行到这里说明已经载入胜利完毕了 this.removeEventListener("load", arguments.callee, false); // 这里是回调函数 }, false); } } ``` 通过使用这个方法，我们可以在多种浏览器中判断iframe是否加载成功，并执行相应的操作。 基于JS判断iframe是否加载成功的方法有很多种，我们可以根据不同的浏览器选择合适的方法。通过使用这些方法，我们可以确保iframe加载成功后执行相应的操作，从而提高Web应用程序的性能和可靠性。