82

私はAJAXアプリを持っています。ユーザーがボタンをクリックすると、ページの表示が変わります。元の状態に戻ることを期待して戻るボタンをクリックしますが、代わりにブラウザの前のページに移動します。

戻るボタン イベントをインターセプトして再割り当てするにはどうすればよいですか? 私はRSHのようなライブラリを調べました（これはうまくいきませんでした...）、ハッシュタグを使用すると何らかの形で役立つと聞きましたが、意味がわかりません。

4

10 に答える 10

9

以下の JQuery コードのように、ブラウザーの [戻る] ボタンを無効にするのは非常に簡単です。

// History API 
if( window.history && window.history.pushState ){

  history.pushState( "nohb", null, "" );
  $(window).on( "popstate", function(event){
    if( !event.originalEvent.state ){
      history.pushState( "nohb", null, "" );
      return;
    }
  });
}

あなたはそれが働いているのを見ることが でき ます.

ありがとう ！

于 2016-04-26T08:12:36.337 に答える
9

darkporter's answerに記載されている説明に本当に感謝していますが、 「hashchange」イベントを使用することで改善できると思います。darkporter が説明したように、すべてのボタンで window.location.hash 値が変更されるようにする必要があります。

  • 1 つの方法は、<button>要素を使用し、それらにイベントをアタッチして を設定することwindow.location.hash = "#!somehashstring";です。
  • これを行う別の方法は、 のようにボタンにリンクを使用することです<a href="#!somehashstring">Button 1</a>。これらのリンクをクリックすると、ハッシュが自動的に更新されます。

ハッシュ記号の後に感嘆符が付いているのは、Google の「ハッシュバン」パラダイム (詳しくはこちらを参照) を満たすためです。これは、検索エンジンにインデックスを付けたい場合に役立ちます。#!color=blue&shape=triangleハッシュ文字列は通常、名前と値のペアまたはリストのような#!/blue/triangleもので、Web アプリにとって意味のあるものであれば何でもかまいません。

次に、ハッシュ値が変更されるたびに起動するこのコードを追加するだけです (戻るボタンが押された場合を含む)。ポーリング ループは必要ないようです。

window.addEventListener("hashchange", function(){
    console.log("Hash changed to", window.location.hash);
    // .... Do your thing here...
});

Chrome 36 以外ではテストしていませんが、caniuse.com によると、これは IE8+、FF21+、Chrome21+、および Opera Mini を除く他のほとんどのブラウザで利用できるはずです。

于 2014-08-15T19:40:14.390 に答える
4

プライバシー上の理由から、戻るボタンを無効にしたり、ユーザーの履歴を調べたりすることはできませんが、ページを変更せずにこの履歴に新しいエントリを作成することは可能です。AJAX アプリケーションの状態が変わるたびtop.locationに、新しいURI フラグメントで更新します。

top.location = "#new-application-state";

これにより、ブラウザの履歴スタックに新しいエントリが作成されます。いくつかの AJAX ライブラリは、 Really Simple Historyなどの退屈な詳細をすべて処理しています。

于 2009-12-04T02:44:01.180 に答える
2

私の状況では、戻るボタンでユーザーが最後のページに移動するのを防ぎ、代わりに別のアクションを実行したいと考えていました。イベントを使用してhashchange、私にとってはうまくいった解決策を思いつきました。このスクリプトは、私の場合のように、使用しているページがまだハッシュを使用していないことを前提としています。

var hashChangedCount = -2;
$(window).on("hashchange", function () {
    hashChangedCount++;
    if (top.location.hash == "#main" && hashChangedCount > 0) {
        console.log("Ah ah ah! You didn't say the magic word!");
    }
    top.location.hash = '#main';
});
top.location.hash = "#";

他のいくつかの回答で私が抱えていた問題は、hashchangeイベントが発生しないことです。状況によっては、これもうまくいくかもしれません。

于 2015-08-30T16:34:55.660 に答える
2

私はこのようなことをします。以前のアプリの状態の配列を保持しています。

次のように開始:

var backstack = [];

次に、ロケーション ハッシュの変更をリッスンし、変更されたら次のようにします。

if (backstack.length > 1 && backstack[backstack.length - 2] == newHash) {
    // Back button was probably pressed
    backstack.pop();
} else
    backstack.push(newHash);

このようにして、ユーザー履歴を追跡する簡単な方法が得られます。ここで、(ブラウザのボタンではなく) アプリに戻るボタンを実装したい場合は、次のようにします。

window.location.hash = backstack.pop();
于 2012-09-27T20:00:36.740 に答える