javascript iframe 设置计时器并检查是否已加载

Question

我需要在加载页面之前触发 url 单击时的 url 验证检查。如果 URL 无效或无法访问，我需要显示警报。

当我使用 i.onload 时，它会一直等待加载。如果它从不加载，它也永远不会产生由 i.onerror 捕获的错误。如果链接正确加载，则一切正常。

html:

<a id={UrlToTest} onClick={this.testUrl}>{UrlToTest}</a>

JavaScript:

testURL(e) {
var targetURL = e.target.id;
var i = document.createElement('iframe');
i.style.display = 'none';
i.src = targetURL;
document.body.appendChild(i);
i.onload = function() {
//setTimeout(function(){
    i.parentNode.removeChild(i);
    return window.open(targetURL, '_blank');
 //}, 5000);
  };
  i.onerror = function(){
    alert('The link didn"t load');
  };
}

如果我插入 console.log，它仍然等待 onload 触发。如果我允许打开链接而不在隐藏的 iframe 中进行测试，它将立即显示“无法连接”，或 404 错误等。在 iframe 中检查时永远不会收到此错误。

Answer 1

欢迎来到 Stack Overflow :)

我相信您的问题是您在设置 src 之后设置了 onload 和 onerror。

这样想 - 你的浏览器正在尝试尽快加载(或出错)iframe，一旦设置了 src，浏览器就会开始工作，如果出现错误(或success) 在设置 onload 之前抛出，没有任何东西可以捕获它。

TLDR - 我认为切换顺序(首先设置 onload 和 onerror)应该可以解决您的问题。

编辑--所以我误解了这个问题，是的，在某些情况下，iframe 没有任何返回，具体来说，我可以在堆栈溢出中的控制台上使用此代码重现该情况:

var targetURL = 'localhost:1'
var i = document.createElement('iframe');

i.onload = function() {
    alert('The link did load');
};
i.onerror = function(){
    alert('The link did NOT load');
};

i.src = targetURL;
document.body.appendChild(i);

上面的代码不会触发任何事件。我不知道为什么会发生这种情况，但也许您应该使用 setTimeout 计时器来使整个操作超时

let timer = setTimeout(() => {
    alert('Error opening page');
}, 5000);

var targetURL = 'localhost:1'
var i = document.createElement('iframe');

i.onload = function() {
    alert('The link did load');
    clearTimeout(timer);
};
i.onerror = function(){
    alert('The link did NOT load');
    clearTimeout(timer);
};

i.src = targetURL;
document.body.appendChild(i);

我进行了更深入的研究，结果发现 Chrome 在这方面存在一个错误

https://bugs.chromium.org/p/chromium/issues/detail?id=365457

不幸的是，从错误报告来看，“这就是规范”:

I have discussed this with Adam Barth, and we have confirmed that the behaviour described here is the behaviour described in the Living HTML specification.

As follows: The specification requires that all HTML elements support on onerror event. However, it does NOT require that all elements supporting network fetches raise fire a simple event called onerror. That is, elements must support allowing applications to set error handlers, but there is no (generic) requirement that the event be raised, in either HTML or the Fetch specification.