检测iframe何时开始加载新URL

如何检测我的页面上的iframe是否启动以加载新页面？检测iframe何时开始加载新URL

我们的情况是：

当iFrame的内容开始改变，我们需要显示“加载”动画和隐藏搜索框。
我知道如何处理“iframe中完成加载”事件（隐藏动画），而不是如何捕捉到最初的“开始改变”事件...

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

来源

2013-06-26 Philipp

也许这可以帮助：？IFRAME SRC变化事件检测] http://stackoverflow.com/a/4010296/1427878 – CBroe

的可能的复制（https://stackoverflow.com/questions/2429045/iframe-src-change-event-detection） –

我发现AB埃特解决方案，如果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-11 01:28:55 Bruce

哇，非常令人印象深刻的解决方案:)我喜欢它！ – Philipp

完美！好主意！ –

谢谢，那很棒： - * – hmojtaba

我想出了以下解决方案 - 因为我们控制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-26 09:37:14 Philipp

真棒解决方案！ ;） – Joanes

不错的解决方案，它帮助我。（window）.on（'beforeunload'，function（）{ window.top.postMessage（'iframe_change'，'*'）; }）;这对我来说快得多。 – Breixo

在我看来，这太复杂了，并且忽略了关键事件应该是'onbeforeunload'，而不是'onunload'的主要观点。 OP明确表示他想知道帧何时开始*加载新的url。请参阅http://stackoverflow.com/a/30719095/422845 – jbyrd

当你动态创建的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-23 00:18:58 user6242961

已存在一个可能的解决方案：iFrame src change event detection?

但是，如果要操纵目标页面，则不需要触摸iframe-目标文件内容。只需在父页面中添加正确的JS代码，就可以访问相同的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-16 10:15:44

检测iframe何时开始加载新URL

回答

相关问题