0
propsで渡されたクロスオリジンURLを読み込むiframeコンポーネントを使用しています。小道具を経由して新しいURLにiframeを移動すると、新しいエントリがiframeの履歴にプッシュされ、ブラウザの「戻る」ボタンが乗っ取られます。 src urlが変更されるたびに、クロスオリジンiframeの予想される動作です。再レンダリングではなく新しいDOMノードを作成する
は、の代わりに新しいiframeを作成することはできますか？私の前提は、iframeが持っていた内部状態を破壊して、 'back'ボタンの履歴への新しいエントリを防ぐことです。 （react-iframeから適応）
iframeコンポーネント：
// ETA: using React.Component instead of
// PureComponent yields the same back button behavior
const Iframe = class extends PureComponent {
render() {
return React.createElement('iframe', {
ref: 'iframe',
frameBorder: '0',
src: this.props.url,
sandbox: this.props.sandbox,
referrerpolicy: 'no-referrer',
target: '_parent',
allowFullScreen: this.props.allowFullScreen || false,
style: Object.assign(
{},
{
position: this.props.position || 'absolute',
display: this.props.display || 'block',
height: this.props.height || '100%',
width: this.props.width || '100%'
},
this.props.styles || {}
),
height: this.props.height || '100%',
width: this.props.width || '100%'
});
}
};
ETA：私は新しい根底にあるのiframeを作成すると、読み込み歴史based on this answer、にエントリを防ぐことができますことを想定しています：
ありませんsrcを変更して、古いiframeを新しいものに置き換えてください。 履歴状態はありません。同じ機能。誰もが勝つ。
<!doctype html>
<style> iframe {
width: 300px;
height:300px; } </style>
<script> var urls = ["http://bing.com", "http://google.com",
"http://duckduckgo.com"];
function next() {
if(urls.length==0) return;
var original = document.getElementsByTagName("iframe")[0];
var newFrame = document.createElement("iframe");
newFrame.src = urls.pop();
var parent = original.parentNode;
parent.replaceChild(newFrame, original); } </script>
<p>let's test some iframes</p> <button onclick="next()">next</button>
<iframe />
@Dekelに感謝します。私はそれを 'Component'に変更しましたが、戻るボタンはまだ親ページではなくiframeの履歴をナビゲートしています。私は、新しいiframeを作成するとiframeの履歴がエントリを累積するのを防ぐことができないと誤っていますか？ – Brandon
私はそれがまったく反応するものではないと思います。それはブラウザがiframeで動作する方法です。反応するアプリでチェックしなかったのですか？ :) – Dekel
私はそれを直接チェックしていませんが、私はこの記事（私はOPに追加されます）の答えの私の仮定を基にしています：https://stackoverflow.com/questions/14737365/modify-iframe- src-without-entry-to-history-object – Brandon