後退按鈕更改web應用程序中的iframe內容頁面

我有一個Web應用程序頁面，其中包含用戶可以從中選擇的模板。有一個iframe可以在頁面底部以a4/print模式預覽模板。

用戶可以使用頁面上的一些縮略圖/按鈕來選擇各種模板。

我今天注意到瀏覽器的後退按鈕只是改變了iFrame內的頁面而不是主瀏覽器中的頁面。這隻發生在Chrome（最新版本）和MS Edge（最新版本）中。它在FF（也是最新的）中按照需要工作。我還沒有確認Safari。

後退按鈕不斷重新加載歷史記錄中的任何頁面的iframe，並且它永遠不會退出主頁面。因此，只要有歷史記錄，它就會加載其他頁面，這些頁面從來就不是意味着/加載到iFrame中。

基礎上的研究，我改變了，從這個加載的iFrame的JS：

$('iframe#template-iframe').attr('src', templateRoute);

這個

var iframeElement = $('iframe#template-iframe').get(0); 
iframeElement.contentWindow.location.replace(templateRoute);

我管理通過後端PHP和JS避免去後退按鈕回到某些頁面（如結賬時的POST）。

currentURL = location.pathname; 
history.replaceState(null, '', previousURL); 
history.pushState(null, '', currentURL); 

window.addEventListener("popstate", function() { 
    history.replaceState(null, '', currentURL); 
    setTimeout(function() { 
     setCookie("back_button_cookie",99); 
     location.replace(previousURL); 
    }, 0); 
}, false);

更改後仍然存在問題。我希望iFrame被後退按鈕忽略。有沒有我在上面的「後退按鈕JS代碼」中錯過的東西？

歡迎任何建議！

來源

2016-12-29 TheRealPapa

您可以嘗試婁代碼

var iframeElement = $('iframe#template-iframe').get(0); 
changeIframeSrc(iframeElement,templateRoute); 

var changeIframeSrc = function(iframe, src) { 
    var frame = iframe.cloneNode(); 
    frame.src = src; 
    iframe.parentNode.replaceChild(frame, iframe); 
};

來源

2016-12-29 10:05:14

嗨@Bharatsing帕爾馬感謝您的答覆。你的代碼在頁面加載時工作正常，並且第一次更改iframe內容時，第二次更改失敗，導致無法讀取replaceChild屬性。此外，後退按鈕的行爲仍然存在，iframe頁面被更改。 – TheRealPapa

後退按鈕更改web應用程序中的iframe內容頁面

回答

相關問題