Question

我有这个iframe：

<iframe id="website-overlay" src="link" onload="OverlayMostraCustomContenuto()"></iframe>

但即使加载时出现错误，也会加载此函数，例如：

Load denied by X-Frame-Options: http://www.youtube.com/watch?v=Q4cQsoz4mFA&feature=share does not permit cross-origin framing.

有没有办法知道iframe是否正确加载？我想是的，如果Firebug可以捕获它。

Answer 1

我的解决方案＆＃34;没有检测到所有iframe错误，但确实检测到了＃34;问题中提到的那个你无法控制的网站。

我有onload =＆＃34; load（）＆＃34;在调用load（）事件的iframe中。唯一的问题是，即使加载失败，也会调用此加载事件。我尝试过使用onerror =＆＃34;错误（）＆＃34;事件但它永远不会被调用。

我知道这有点笨拙，但我还没有找到更好的东西，所以作为解决方法，我会做以下事情：

当请求iframe时，我在页面的某处以毫秒为单位设置iframeRequestTime。调用load（）事件时，我得到loadTime。然后我找到loadTime和requestTime之间的区别。如果请求被阻止，响应将很快，因此差异很小。我已将其设置为如果差异小于1000毫秒，我会删除iframe并在新窗口中打开该网址。我认为除非网站非常小，或者除非你有一个非常快的互联网连接，否则大多数网站都不会在1000毫秒内完全加载。

function LoadIFrame(url) {
    // Create & display iframe
    var iframe = '<iframe src="' + url + '" onload="load()"></iframe>';
    $('#iframeHolder').append(iframe);

    // Time
    var time = new Date().getTime();
    $('#iframeHolder').attr('data-time', time);
}

function load() {
    var requestTime = $('#iframeHolder').attr('data-time');
    var loadTime = new Date().getTime();
    var difference = loadTime - requestTime;
    if (difference < 1000) {
        var url = $('#iframeHolder iframe').attr('src');
        window.open(url, '_blank');
        $('#iframeHolder').empty()
    }
}

通常我不会发布这样一个hacky修复但这个问题已经存在了一段时间而现在没有答案。显然这个解决方案不是一个完美的解决方案，但它很适合我的网站的需求。任何建议都将受到欢迎。

Answer 2

您可以收听error事件，但由于相同的原始政策，您根本无法做到这一点。
但是您可以尝试使用解决方法 - 将侦听器绑定到iframe的load事件并添加setTimeout函数，该函数会在指定的时间后将iframe视为未加载。我知道，没有太多优雅的解决方案，但我唯一能想到的。
示例代码可能如下所示：

var iframe = document.getElementById('iframe');
var iframeLoadTimeAllowed = 30000; // 30 seconds (or whatever you want)

var timeout = setTimeout(function() {
    alert("Iframe's loading exceeded " + (iframeLoadTimeAllowed / 1000) + " seconds!");
}, iframeLoadTimeAllowed);

iframe.addEventListener('load', function() {
    clearTimeout(timeout);
})

对于Firebug控制台，父文档和iframe文档共享相同的console对象。这就是为什么输出iframe引发的错误的原因。

如何捕获iframe加载错误？

2 个答案: