javascript - 检测 iframe 何时开始加载新 URL

Question

如何检测我页面上的 iframe 开始加载新页面？

我们的情况是:

• 当 iFrame 内容开始更改时，我们需要显示“正在加载”动画并隐藏搜索框。
• 我知道如何处理“iframe 已完成加载”事件(隐藏动画)但不知道如何捕捉初始的“开始更改”事件...

注意:我可以将 jquery“单击” Hook 附加到菜单上的链接，这将起作用。然而，在 iframe 内容中有许多交叉引用链接，“更改”事件也适用于它们!所以我们需要在 用户点击 iframe 内的链接 或 iframe src 通过 javascript 更改 时捕获事件 - 因为我们还想显示加载动画和隐藏搜索框。

Answer 1

如果 iframe 和容器页面同源，我找到了更好的解决方案，不必将额外的代码放入内页:

<iframe src="same-origin.com" onload="content_finished_loading(this)"></iframe>
<script>
    var indicator = document.querySelector('.loading-indicator');
    var content_start_loading = function() {
        indicator.style.display = 'block';
    };

    var content_finished_loading = function(iframe) {
        indicator.style.display = 'none';
        // inject the start loading handler when content finished loading
        iframe.contentWindow.onunload = content_start_loading;
    };
</script>