javascript - 强制同步 iframe 加载

Question

我有一个指向任意外部域 http://A 的 iframe。我想在用户事件中将它发送到另一个外部域 http://B。

说 http://B 加载缓慢。如果我只是设置 iframe.src = "http://B"，那么 iframe 将保留 A 的内容，直到下载 B完全可以渲染。这让用户感到困惑，因为他们要求输入 B，但他们看到的只是 A。

我想从我的域加载一个页面，比如 ../html/loading.html，在 A 和 B 之间。假设此页面加载始终很快。

我观察到设置 iframe.src 是异步的。考虑以下代码:

iframe.src = '../html/loading.html';
iframe.src = 'http://B';

这将跳过打开 ../html/loading.html 并直接转到 http://B。 (不管 loading.html 有多快，或者 B 有多慢)。我也试过这样做:

iframe.src = '../html/loading.html';
iframe.contentWindow.location.reload();
iframe.src = 'http://B';

但是，这会引发跨域错误，说我无法访问 http://A 的 contentWindow 中的内容(因为 loading.html 尚未加载，我们仍在 http://A 上，我无法强制重新加载)。

有没有办法强制 iframe 同步加载 URL？我正在编写一个 Chrome 扩展程序，所以如果它必须特定于 crx 也没关系。

Answer 1

您会希望在当前 URL 加载完成后立即加载下一个 URL，对我们来说幸运的是，iframe 有一个我们可以使用的 onload 事件。

你会想做这样的事情:

iframe.src='../html/loading.html'
//load the next page after finishing loading the last one
iframe.onload=function(){iframe.src='http://B';}