49

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

我们的情况是：

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

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

4

4 回答 4

33

如果 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>
于 2016-01-11T01:28:55.993 回答
29

我想出了以下解决方案-这仅是因为我们控制了 iframe 内容和主机窗口的内容

在 iframe 中，我们将以下脚本添加到页面页脚（所有页面使用相同的模板，因此这是对单个文件的更改）

<script>
window.onunload = function() {
    // Notify top window of the unload event
    window.top.postMessage('iframe_change', '*');
};
</script>

在主机窗口中，我们添加这个脚本来监控 iframe 状态

function init_content_monitor() {
    var content = jQuery('.iframe');

    // The user did navigate away from the currently displayed iframe page. Show an animation
    var content_start_loading = function() {
        alert ('NOW: show the animation');
    }

    // the iframe is done loading a new page. Hide the animation again
    var content_finished_loading = function() {
        alert ('DONE: hide the animation');
    }

    // Listen to messages sent from the content iframe
    var receiveMessage = function receiveMessage(e){
        var url = window.location.href,
            url_parts = url.split("/"),
            allowed = url_parts[0] + "//" + url_parts[2];

        // Only react to messages from same domain as current document
        if (e.origin !== allowed) return;
        // Handle the message
        switch (e.data) {
            case 'iframe_change': content_start_loading(); break;
        }
    };
    window.addEventListener("message", receiveMessage, false);

    // This will be triggered when the iframe is completely loaded
    content.on('load', content_finished_loading);
}
于 2013-06-26T09:37:14.067 回答
0

已经有一个可能的解决方案：iFrame src change event detection？

但是，如果要操作目标页面，则不需要触摸 iframe-target 文件内容。只需在父页面中添加正确的 JS 代码，它就可以访问 SAME-ORIGIN iframe。我用过这样的东西：

<iframe id="xyz" ....>
.....
<script>
var iframeElement = document.getElementById("xyz");
var iframe_El = iframeElement.contentDocument || iframeElement.contentWindow.document;
// manipulate iframe_El wih "on complete" events and like that.
....
</script>

更多信息：https ://jsfiddle.net/Lnb1stc8/

于 2018-02-16T10:15:44.960 回答
-1

当您动态创建 iframe 时，请像这样包含 ONLOAD 事件...

F=document.createElement('iframe');
F.onload=function(){
    UpdateDetails(
        this.contentWindow.document.title,
        this.contentWindow.location
    );
};
F.src='some url';
document.getElementById('Some_Container').appendChild(F);

当用户上网时，onload 事件现在将通过下面的函数不断更新下面的全局变量：

var The_Latest_Title='';
var The_Latest_URL='';
function UpdateDetails(Title,URL){
    The_Latest_Title=Title;
    The_Latest_URL=URL;
}
于 2016-04-23T00:18:58.153 回答