检测无法加载iframe的内容

问题描述 投票：53回答：6

我可以使用load事件检测何时加载了iframe的内容。不幸的是，就我的目的而言，这有两个问题：

  • 如果加载页面时出错（404/500等），则永远不会触发load事件。
  • 如果某些映像或其他依赖项无法加载，则会像往常一样触发load事件。

是否有某种方法可以确定是否发生上述任何一种错误？

我正在编写一个基于Mozilla / XULRunner的半网络半桌面应用程序，因此欢迎只在Mozilla中运行的解决方案。

javascript html firefox-addon frames xulrunner
6个回答
14
投票

如果您可以控制iframe页面（并且页面位于同一域名中），则策略可以如下所示：

  • 在父文档中，初始化变量var iFrameLoaded = false;
  • 加载iframe文档时，在父级中将此变量设置为true，从iframe文档调用父级函数(setIFrameLoaded();（例如）。
  • 使用iFrameLoaded对象检查timer标志（将计时器设置为您的首选超时限制） - 如果标志仍为false，则可以判断iframe未定期加载。

我希望这有帮助。

8
投票

我最近遇到了这个问题，不得不求助于在父页面上设置Javascript轮询操作（包含IFRAME标记）。此JavaScript函数检查IFRAME的内容，以查找仅应存在于GOOD响应中的显式元素。当然，这假定您不必处理违反“同源政策”的问题。

而不是检查可能从许多不同的网络资源生成的所有可能的错误。我只是检查了一个我知道应该是一个良好响应的恒定正元素。

在预定的时间和/或尝试检测到预期元素的失败后，JavaScript会修改IFRAME的SRC属性（从我的Servlet请求）用户友好错误页面，而不是显示典型的HTTP错误消息。 JavaScript也可以轻松地修改SRC属性以生成完全不同的请求。

function checkForContents(){
var contents=document.getElementById('myiframe').contentWindow.document
if(contents){
    alert('found contents of myiframe:' + contents);
    if(contents.documentElement){
        if(contents.documentElement.innerHTML){
            alert("Found contents: " +contents.documentElement.innerHTML);
            if(contents.documentElement.innerHTML.indexOf("FIND_ME") > -1){
                openMediumWindow("woot.html", "mypopup");
            }
        }
    }
}

}

1
投票

我认为针对错误页面会触发pageshow事件。或者，如果您是从chrome执行此操作，那么请检查您的进度监听器的请求，看看它是否是HTTP通道，在这种情况下您可以检索状态代码。

至于页面依赖性，我认为你只能通过添加一个捕获onerror事件监听器从chrome做到这一点，即使这样，它只会发现元素中的错误，而不是CSS背景或其他图像。

1
投票

这是一个非常晚的答案，但我会留给需要它的人。

任务：加载iframe跨源内容，成功时发出onLoaded，加载错误时发出onError。

这是我可以开发的最多跨浏览器源独立解决方案。但首先，我将简要介绍一下我的其他方法以及它们为什么不好。

1. iframe这对我来说有点震撼，iframe只有onload事件并且在加载时调用并且出错，没有办法知道它是不是错误。

2. performance.getEntriesByType（'resource'）。此方法返回已加载的资源。听起来像我们需要的。但遗憾的是，firefox总是在资源数组中添加资源，无论它是加载还是失败。没有办法知道Resource实例是否成功。照常。顺便说一句，这种方法在ios <11中不起作用。

3.脚本我试图使用<script>标签加载html。遗憾的是，只有在Chrome中才能正确地发布onload和onerror。

当我准备放弃时，我的老同事告诉我关于html4标签<object>。它就像<iframe>标签，除了它没有加载内容时有后备。这听起来像我们需要的！可悲的是，它并不像听起来那么容易。

代码部分

var obj = document.createElement('object');

// we need to specify a callback (i will mention why later)
obj.innerHTML = '<div style="height:5px"><div/>'; // fallback

obj.style.display = 'block'; // so height=5px will work
obj.style.visibility = 'hidden'; // to hide before loaded

obj.data = src;

在此之后，我们可以像<object>那样为iframe设置一些属性。唯一的区别是，我们应该使用<params>，而不是属性，但它们的名称和值是相同的。

for (var prop in params) {
    if (params.hasOwnProperty(prop)) {
        var param = document.createElement('param');
        param.name = prop;
        param.value = params[prop];

        obj.appendChild(param);
    }
}

现在，困难的部分。像许多相同的元素一样，<object>没有回调规范，因此每个浏览器的行为都不同。

  • 铬。在错误和负载上发出load事件。
  • Firefox浏览器。正确发射load和error。
  • 苹果浏览器。没有发光......

似乎与iframe，getEntriesByType，script没有什么不同......但是，我们有本机浏览器后备！因此，因为我们直接设置了回退（innerHtml），我们可以判断是否加载了<object>

function isReallyLoaded(obj) {
    return obj.offsetHeight !== 5; // fallback height
}

/**
 * Chrome calls always, Firefox on load
 */
obj.onload = function() {
    isReallyLoaded(obj) ? onLoaded() : onError();
};

/**
 * Firefox on error
 */
obj.onerror = function() {
    onError();
};

但是如何处理Safari呢？好老setTimeout。

var interval = function() {
    if (isLoaded) { // some flag
        return;
    }

    if (hasResult(obj)) {
        if (isReallyLoaded(obj)) {
            onLoaded();
        } else {
            onError();
        }
    }

    setTimeout(interval, 100);
};

function hasResult(obj) {
    return obj.offsetHeight > 0;
}

是的......不是那么快。问题是，<object>失败时没有提到规格行为：

  1. 试图加载（size = 0）
  2. 确实失败（大小=任何）
  3. 后备（size =在innerHtml中）

因此，代码需要一点点增强

var interval = function() {
    if (isLoaded) { // some flag
        return;
    }

    if (hasResult(obj)) {
        if (isReallyLoaded(obj)) {
            interval.count++;
            // needs less then 400ms to fallback
            interval.count > 4 && onLoadedResult(obj, onLoaded);
        } else {
            onErrorResult(obj, onError);
        }
    }

    setTimeout(interval, 100);
};
interval.count = 0;

setTimeout(interval, 100);

好吧，并开始加载

document.body.appendChild(obj);

就这些。我试图在每个细节上解释代码，所以它可能看起来不那么愚蠢。

附： WebDev糟透了

0
投票

拥有iframe中加载的页面中最顶层（正文）元素的ID。

在iframe的Load处理程序上，检查getElementById（）是否返回非null值。如果是，iframe已成功加载。否则它失败了。

在这种情况下，将frame.src =“about：blank”。确保在执行此操作之前删除loadhandler。

0
投票

不完全回答你的问题，但是我的搜索答案把我带到了这里，所以我发帖以防万一其他人对我有类似的询问。

它并不完全使用加载事件，但它可以检测网站是否可访问和可调用（如果是，则理论上应加载iFrame）。

起初，我想像其他人一样做一个AJAX调用，除了它最初对我不起作用，因为我使用了jQuery。如果你执行XMLHttpRequest，它可以很好地工作：

var url = http://url_to_test.com/
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status != 200) {
        console.log("iframe failed to load");
    }
};
xhttp.open("GET", url, true);
xhttp.send();

编辑： 所以这种方法可以正常工作，除非它有很多假阴性（因为交叉原始的malarky而拾取了很多会在iframe中显示的东西）。我解决这个问题的方法是在服务器上执行CURL / Web请求，然后检查响应标头a）如果网站存在，b）如果标头设置了x-frame-options。

如果您运行自己的网络服务器，这不是问题，因为您可以自己进行api调用。

我在node.js中的实现：

app.get('/iframetest',function(req,res){ //Call using /iframetest?url=url - needs to be stripped of http:// or https://
   var url = req.query.url; 
    var request = require('https').request({host: url}, function(response){ //This does an https request - require('http') if you want to do a http request
        var headers = response.headers;
        if (typeof headers["x-frame-options"] != 'undefined') {
            res.send(false); //Headers don't allow iframe
        } else {
            res.send(true); //Headers don't disallow iframe
        }
    });
    request.on('error',function(e){
       res.send(false); //website unavailable
    });
    request.end();
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.