ウェブアプリのiframeコンテンツページをバックボタンに変更する

Question

ハッピーホリデーがすべて！

私は、ユーザーが選択できるテンプレートを含むWebアプリケーションページを持っています。ページの下部にあるテンプレートをa4 /印刷モードでプレビューするiframeがあります。

ユーザーは、ページ上のサムネイル/ボタンを使用してさまざまなテンプレートを選択できます。

今日、ブラウザの戻るボタンは、メインブラウザのページではなくiFrame内のページを変更することに気付きました。これはChrome（最新版）とMS Edge（最新版）でのみ発生します。それはFF（また最新の）で望むように動作します。私はSafariをまだ確認していない。

[戻る]ボタンは、履歴内の任意のページでiframeをリロードし続け、メインページを終了しません。そのため、履歴がある限り、iFrameには意味がない/ロードされていない他のページが読み込まれます。私が行くのを避けるために、バックエンドのPHPとJSを経由して戻るボタンを管理しています。この

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

に

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

：

は、研究に基づいて、私はこのことからiFrameをロードする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); 
};