检测iframe何时开始加载新URL [英] Detect when an iframe starts to load new URL

问题描述

如何在我的网页上启动检测到iframe加载新页面？

How can I detect that an iframe on my page starts to load a new page?

我们的情况是：

• 当iFrame内容开始变化时，我们需要显示加载动画并隐藏搜索框。


• 我知道如何处理iframe已经完成加载事件（隐藏动画）但不知道如何捕获最初的开始更改事件......

注意：
我可以将jqueryclick挂钩附加到菜单上的链接，这将起作用。但是，在iframe内容中有许多交叉引用链接，更改事件也适用于它们！因此，当用户点击iframe内的链接或 iframe src通过javascript更改时，我们需要捕获事件 - 因为我们还想显示加载动画和隐藏搜索框。

Note: I can attach jquery "click" hook to the links on the menu, which will work. However, inside the iframe content there are many cross-reference links, and the "change" event also applies for them! So we need to catch event when user clicks on a link inside the iframe or when the iframe src is changed via javascript - because we also want to show the loading-animation and hide the search-box.

推荐答案

如果iframe和容器页面来源相同，我找到了更好的解决方案，没有将额外的代码放入内页：

I found a better solution if iframe and the container page is same origin, don't have to put extra code into the inner page:

<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>

这篇关于检测iframe何时开始加载新URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！