检测iframe内容是否已成功加载
我有一个包含iframe的小部件。 用户可以configuration此iframe的url，但如果url无法加载（不存在或用户无法访问Internet），则iframe应该故障转移到默认的脱机页面。
问题是，如何检测iframe是否可以加载？ 我尝试订阅“加载”事件，如果这个事件没有被解雇一段时间后，我故障转移，但这只适用于Firefox，因为IE浏览器和Chrome浏览器的“加载”事件时，“页面找不到”是显示。
如今，浏览器有一系列安全限制，使您远离iframe的内容（如果不是您的域名）。
如果你真的需要这个function，你必须build立一个服务器页面，它必须作为一个代理工作，接收url作为参数，testing它是否是一个有效的url，然后进行redirect或显示错误页面。
我通过Googlefind以下链接： http : //wordpressapi.com/2010/01/28/check-iframes-loaded-completely-browser/
不知道是否解决了“找不到页面”的问题。
<script type="javascript"> var iframe = document.createElement("iframe"); iframe.src = "http://www.your_iframe.com/"; if (navigator.userAgent.indexOf("MSIE") > -1 && !window.opera) { iframe.onreadystatechange = function(){ if (iframe.readyState == "complete"){ alert("Iframe is now loaded."); } }; } else { iframe.onload = function(){ alert("Iframe is now loaded."); }; } </script> 我没有尝试过，所以我不知道它是否有效。 祝你好运！
如果您控制iframe的内容，则iframe可以向父级发送消息。
parent.postMessage('iframeIsDone', '*');
父callback监听消息。
var attachFuncEvent = "message"; var attachFunc = window.addEventListener ; if (! window.addEventListener) { attachFunc = window.attachEvent; attachFuncEvent = "onmessage"; } attachFunc(attachFuncEvent, function(event) { if (event.data == 'iframeIsDone') { // iframe is done callback here } });
如何检查url是否可用，然后设置iframe的实际url？ 例如与JQuery
var url = "google.com" var loading_url = "/empty.html" document.getElementById("iframe").src = loading_url; $.ajax({ url: url, type: 'GET', complete: function(e, xhr, settings){ if(e.status === 200){ document.getElementById("iframe").src = url; } } });
编辑：这似乎没有工作跨域，在这种情况下，状态码是0。
如果你可以控制iframe的内容（例如，你可以添加任意代码到页面），你可以尝试在每个页面中实现一个特殊的function，然后在你的页面中调用该函数并捕获一个错误（通过window.onerror处理程序），如果通过eval调用的函数失败，因为页面没有加载。
以下是示例代码： http : //www.tek-tips.com/viewthread.cfm?qid=1114265&page=420
在onload激发之后，您可以清除iframe的内容以查看它是否包含有用页面。 你不得不使这个浏览器specificuc不幸的是，因为他们都显示不同的“页面找不到”消息。
欲了解更多信息，请访问http://roneiv.wordpress.com/2008/01/18/get-the-content-of-an-iframe-in-javascript-crossbrowser-solution-for-both-ie -和-火狐/
