Javascript 检测iframe内容是否已成功加载

我有一个包含iframe的小部件。用户可以配置此iframe的url，但如果无法加载该url（该url不存在或用户无权访问internet），则iframe应故障切换到默认的脱机页面

---

问题是，如何检测iframe是否可以加载？我尝试订阅“加载”事件，如果该事件在一段时间后未触发，则我会进行故障切换，但这仅在Firefox中有效，因为IE和Chrome在显示“未找到页面”时会触发“加载”事件。

如果您可以控制iframe的内容（例如，您可以向页面添加任意代码），您可以尝试在它们中的每一个中实现一个特殊函数，然后在页面中调用该函数，如果通过eval调用的函数由于页面未加载而失败，则会捕获错误（通过

window.onerror

handler）

---

下面是示例代码：

在onload激发之后，您可以清除iframe的内容，查看它是否包含有用的页面。不幸的是，您必须指定此浏览器，因为它们都显示不同的“未找到页面”消息

---

有关更多信息，请查看这里的

我通过谷歌找到了以下链接：

不知道它是否解决了“未找到页面”问题

<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>

var iframe=document.createElement（“iframe”）；
iframe.src=”http://www.your_iframe.com/";
if（navigator.userAgent.indexOf（“MSIE”）>-1&&！window.opera）{
iframe.onreadystatechange=函数（）{
如果（iframe.readyState==“完成”）{
警报（“Iframe现在已加载”）；
}
};
}否则{
iframe.onload=函数（）{
警报（“Iframe现在已加载”）；
};
}

---

我自己没有试过，所以我不知道它是否有效。祝你好运

如今，浏览器有一系列安全限制，使您远离iframe的内容（如果它不属于您的域）

---

如果您真的需要该功能，您必须构建一个服务器页面，该页面必须作为代理，接收url作为参数，测试它是否是有效的url，并重定向或显示错误页面。

检查url是否可用，然后才设置iframe的实际url如何？ e、 g.使用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的内容，iframe可以向父级发送消息

        parent.postMessage('iframeIsDone', '*');

父回调函数侦听消息

        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的src。eval是邪恶的。伊夫拉梅和伊瓦尔是恶魔。这与onload事件非常相似，（iframe.readyState==“complete”）条件为true，即使加载的页面是IE错误页面。因此，它会让我知道页面何时加载，但不会告诉我是否成功加载。无论如何谢谢你！非常感谢。我花了两个小时寻找一个有效的解决方案。最后！：）在Chrome中不起作用：iframe不是XMLHttpRequests！，不，这不行。最好的答案！在chrome上运行良好。是的，你是对的，它不会让你访问跨域内容。嘿，skinssay，你找到没有使用代理的解决方案了吗？不，我没有。我做了一个更深入的研究，我认为这是不可能的：（根据OneRor属性是由webkit支持的，但我没有任何运气使它工作。是吗？截至Chrome 35，至少OneRor不受iframe支持。