检测 iframe 内容是否加载成功

IT技术 javascript dom-events cross-domain
2021-03-08 18:54:59

我有一个包含 iframe 的小部件。用户可以配置此 iframe 的 url,但如果无法加载 url(它不存在或用户无法访问互联网),则 iframe 应故障转移到默认的离线页面。

问题是,如何检测 iframe 是否可以加载?我尝试订阅 'load' 事件,并且,如果此事件在一段时间后未触发,则我进行故障转移,但这仅适用于 Firefox,因为 IE 和 Chrome 在“找不到页面”时触发了 'load' 事件显示。

6个回答

我通过谷歌找到了以下链接: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>

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

iframes 不是 XMLHttpRequests !,不,这不起作用。
2021-04-23 18:54:59
这与 onload 事件非常相似,即使加载的页面是 IE 错误页面, (iframe.readyState == "complete") 条件也为真。所以,它让我知道页面何时加载,但不会让我知道它是否成功加载。不管怎么说,还是要谢谢你!
2021-04-24 18:54:59
最佳答案!在 chrome 上工作正常。
2021-04-26 18:54:59
谢谢!我一直在寻找一个工作解决方案 2 小时。最后!:)
2021-05-08 18:54:59
2021-05-10 18:54:59

现在浏览器有一系列安全限制,使您远离 iframe 的内容(如果它不属于您的域)。

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

如果您控制 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 的实际 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 的内容(例如,您可以向页面添加任意代码),您可以尝试在每个 iframe 中实现一个特殊函数,然后在您的页面中,调用该函数并捕获错误(通过window.onerror处理程序),如果通过 eval 调用的函数由于页面未加载而失败。

这是示例代码:http : //www.tek-tips.com/viewthread.cfm?qid=1114265&page=420

因为他把标签“跨域”,我想他不会控制双方。
2021-04-16 18:54:59
评估是邪恶的。带有 eval 的 iframe 是邪恶的。<iframe id="iframe" src=" google.com " onLoad="eval(str);"></iframe>
2021-04-20 18:54:59
是的,我无法控制内容。这个想法是用户可以使用他想要的任何 url 配置 iframe 的 src。
2021-05-03 18:54:59