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

回答

相關問題