web-dev-qa-db-ja.com

ブラウザバックは、ページ自体の前にネストされたiframeに作用します-それを回避する方法はありますか?

いくつかのajaxとたくさんのjavascriptによってロードされた動的データを含むページがあります。

ページには、ユーザーが選択できるリストが含まれており、選択した各値が新しいデータをページにロードします。

これらのデータ項目の1つは、iframeに提供されるURLです。

jQuery BBQ:戻るボタンとクエリライブラリ を使用して、ブラウザの戻る動作をシミュレートします。

初めて[戻る]ボタンをクリックすると、iframeが前の場所に戻り、ページを元に戻すにはもう一度クリックする必要があるという事実を除けば、すべてうまく機能します。

Iframeの戻る動作を無効にする方法はありますか?

30
kfiroo

私の問題に対する答えは、他の人にも役立つと思います。

問題は、Iframeに新しいURLを割り当てる方法にあり、Jqueryを使用したため、次のようになりました。

$('#myIFrame').attr('src',newUrl);

この方法でURLを割り当てると、ブラウザのアクセス済みURLのリストに新しいエントリが追加されて戻ります。
これは望ましい動作ではなかったため、グーグルで調べたところ、「バックリスト」に追加せずにIframeオブジェクトに新しいURLを割り当てることができることがわかりました。次のようになります。

var frame = $('#myIFrame')[0];  
frame.contentWindow.location.replace(newUrl);

このようにして、戻るボタンは期待どおりに動作します。

ところで、私は ここ から私の答えを得ました。

これが私にとってもあなたにとっても役に立ったことを願っています。

56
kfiroo

IFrameにクロスドメインURLを設定しようとすると、受け入れられた回答が機能しないようです。回避策として、srcを設定する前に(jQueryを使用して)IFrameをDOMから切り離しました。

// remove IFrame from DOM before setting source, 
// to prevent adding entries to browser history
var newUrl = 'http://www.example.com';
var iFrame = $('#myIFrame');
var iFrameParent = iFrame.parent();

iFrame.remove();
iFrame.attr('src', newUrl);
iFrameParent.append(iFrame);
4

Iframe内にハイパーリンクを作成することをお勧めします。それを「戻る」と呼び、hrefをjavascript:history.back(-1)として配置します。これが最善の方法だと思います。

1

基本的に、iframeに新しい履歴エントリが追加されないようにする必要があります。 history.replaceState HTML5で導入されたものは、ほとんどの場合機能します。

history.pushState(state, title, url);
0
Igor G.