我有一个包含 iframe 的小部件。用户可以配置此 iframe 的 url,但如果无法加载 url(它不存在或用户无法访问互联网),则 iframe 应故障转移到默认的离线页面。
问题是,如何检测 iframe 是否可以加载?我尝试订阅 'load' 事件,并且,如果此事件在一段时间后未触发,则我进行故障转移,但这仅适用于 Firefox,因为 IE 和 Chrome 在“找不到页面”时触发了 'load' 事件显示。
我有一个包含 iframe 的小部件。用户可以配置此 iframe 的 url,但如果无法加载 url(它不存在或用户无法访问互联网),则 iframe 应故障转移到默认的离线页面。
问题是,如何检测 iframe 是否可以加载?我尝试订阅 'load' 事件,并且,如果此事件在一段时间后未触发,则我进行故障转移,但这仅适用于 Firefox,因为 IE 和 Chrome 在“找不到页面”时触发了 'load' 事件显示。
我通过谷歌找到了以下链接: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 的内容(如果它不属于您的域)。
如果您确实需要该功能,则必须构建一个服务器页面,该页面必须充当代理,接收 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