Question

节日快乐！

我有一个网页应用页面，其中包含用户可以选择的模板。有一个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。我的＆＃34;后退按钮JS代码＆＃34;是否有我遗漏的东西以上？

欢迎任何建议！

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

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

1 个答案: