Javascript 后退按钮更改web应用中的iframe内容页

祝大家节日快乐

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

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

我今天注意到，浏览器的“后退”按钮只是更改iFrame中的页面，而不是主浏览器中的页面。这只发生在Chrome（最新版本）和MS Edge（最新版本）中。它在FF（也是最新版本）中按需要工作。我还没有确认狩猎

“后退”按钮不断使用历史记录中的任何页面重新加载iframe，并且它从不退出主页。因此，只要有历史记录，它就会加载iFrame中从未加载过的其他页面

根据研究，我更改了加载iFrame的JS：

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

对此

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

我通过后端PHP和JS管理back按钮，以避免返回某些页面（如签出时的帖子）

改变后问题依然存在。我希望iFrame被back按钮忽略。在我上面的“后退按钮JS代码”中有什么我遗漏的吗

---

欢迎任何建议

您可以尝试下面的代码

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

---

您好@Bharatsing Parmar感谢您的回复。您的代码在页面加载时工作正常，在第一次更改iframe内容时，在第二次更改时失败，原因是

无法读取replaceChild的属性。此外，后退按钮的行为保持不变，iframe页面将被更改。
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);
};