后退按钮更改 Web 应用程序中的 iframe 内容页面

Question

祝大家节日快乐！

我有一个 Web 应用页面，其中包含用户可以从中选择的模板。页面底部有一个 iframe 可以在 a4/打印模式下预览模板。

用户可以使用页面上的一些缩略图/按钮来选择各种模板。

我今天注意到浏览器的后退按钮只是更改 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 代码”中遗漏了什么？

欢迎提出任何建议！

Answer 1

你可以试试下面的代码

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);
};