当前位置：文江博客话题详情

检测iframe内容是否加载成功

发布于 2024-10-09 15:29:21 字数 224 浏览 9 评论 0原文

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

问题是，如何检测iframe是否可以加载？我尝试订阅“load”事件，如果该事件在一段时间后没有触发，那么我会进行故障转移，但这仅适用于 Firefox，因为 IE 和 Chrome 会在“找不到页面”时触发“load”事件显示。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白馒头 2024-10-16 15:29:21

我通过 Google 找到了以下链接：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>

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

I found the following link via Google: http://wordpressapi.com/2010/01/28/check-iframes-loaded-completely-browser/

Don't know if it solves the 'Page Not Found' issue.

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

I haven't tried it myself, so I don't know if it works. Good luck!

回复收藏 0 原文

甚是思念 2024-10-16 15:29:21

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

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

回复收藏 0 原文

喜你已久 2024-10-16 15:29:21

如果您控制 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
            }
        });

If you control the content of the iframe, the iframe can send a message to the parent.

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

The parent callback listens for the message.

        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
            }
        });

回复收藏 0 原文

念﹏祤嫣 2024-10-16 15:29:21

检查 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。

How about checking if the url is available and only then setting the actual url of the iframe?
e.g. with 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;
         }
    }
});

Edit:
This does not seem to work cross domain, the status code is 0 in those cases.

回复收藏 0 原文