web-dev-qa-db-ja.com

JavaScriptまたはjQueryブラウザーの戻るボタンクリック検出

誰かがブラウザの戻るボタンのクリックをどのように検出できるか（どのタイプのブラウザでも）経験/コードを共有してもらえますか？

HTML5をサポートしないすべてのブラウザーに対応する必要があります

javascriptjqueryback-button
40
Nil Pun

「popstate」イベントは、前に何かをプッシュした場合にのみ機能します。そのため、次のようなことをする必要があります。

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    window.history.pushState('forward', null, './#forward');

    $(window).on('popstate', function() {
      alert('Back button was pressed.');
    });

  }
});

ブラウザの後方互換性のために、私はお勧めします： history.js

51
Benny Neugebauer

ユーザーが[戻る]ボタンをクリックしたかどうかを検出する方法はたくさんあります。しかし、すべてはあなたのニーズに依存します。以下のリンクを試してみてください、彼らはあなたを助けるはずです。

ユーザーが現在のページで「戻る」ボタンを押したかどうかを検出します。

前の（「進む」）ページの「戻る」ボタンを押した後に現在のページにアクセスしたかどうかを検出します。

10
Vlad Mysla

これはクロスブラウザとモバイルでうまく機能することがわかりました back_button_override.js .

（サファリ5.0用のタイマーを追加）

// managage back button click (and backspace)
var count = 0; // needed for safari
window.onload = function () { 
    if (typeof history.pushState === "function") { 
        history.pushState("back", null, null);          
        window.onpopstate = function () { 
            history.pushState('back', null, null);              
            if(count == 1){window.location = 'your url';}
         }; 
     }
 }  
setTimeout(function(){count = 1;},200);
6
user2992220

JavaScriptでは、ナビゲーションタイプ2はブラウザの戻るまたは進むボタンがクリックされ、ブラウザが実際にキャッシュからコンテンツを取得していることを意味します。

if(performance.navigation.type == 2) {
    //Do your code here
}
3
Hasan Badshah

この素晴らしいプラグインを使用できます

https://github.com/ianrogren/jquery-backDetect

あなたがする必要があるのは、このコードを書くことです

  $(window).load(function(){
    $('body').backDetect(function(){
      // Callback function
      alert("Look forward to the future, not the past!");
    });
  });

ベスト

1
Hussam Kurd

次の機能でURLボタンを無効にします

window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle the back (or forward) buttons here
            // Will NOT handle refresh, use onbeforeunload for this.
        };
    }
    else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Detect and redirect change here
                // Works in older FF and IE9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            }
            else {
                ignoreHashChange = false;
            }
        };
    }
};
0
Sakthi Karthik

HTML5の場合、これはトリックを行います

window.onpopstate = function() {
   alert("clicked back button");
}; history.pushState({}, '');
0
Ashik Jyothi

HTML5 History APIで利用できます。イベントは'popstate'と呼ばれます

0
Eric

私の場合、私はjQuery .load()を使用してSPAのDIVを更新しています（単一ページ[web]アプリ）。

$(window).on('hashchange', ..)イベントリスナーを使用するのは初めてなので、これはやりがいがあることがわかり、ハッキングに少し時間がかかりました。多くの回答を読んでさまざまなバリエーションを試したおかげで、最終的に次のように機能させる方法がわかりました。私の知る限り、これまでのところ安定しています。

要約すると、ビューをロードするたびに設定する必要がある変数globalCurrentHashがあります。

次に、$(window).on('hashchange', ..)イベントリスナーが実行されると、次のことを確認します。

  • location.hashの値が同じ場合、Going Forward
  • location.hashの値が異なる場合、Going Back

グローバル変数を使用することは最もエレガントなソリューションではありませんが、JSでOOを実行することはこれまで私には難しいようです。改善/改善の提案は確かにありがたい

セットアップ：

  1. グローバル変数を定義します：
    var globalCurrentHash = null;

  1. .load()を呼び出してDIVを更新する場合、グローバル変数も更新します。

    function loadMenuSelection(hrefVal) {
  $('#layout_main').load(nextView);
  globalCurrentHash = hrefVal;
}

  2. ページの準備ができたら、リスナーを設定してグローバル変数をチェックし、「戻る」ボタンが押されているかどうかを確認します。

    $(document).ready(function(){
  $(window).on('hashchange', function(){
      console.log( 'location.hash: ' + location.hash );
      console.log( 'globalCurrentHash: ' + globalCurrentHash );

      if (location.hash == globalCurrentHash) {
          console.log( 'Going fwd' );
      }
      else {

          console.log( 'Going Back' );
          loadMenuSelection(location.hash);
      }
    });

});
0
Gene Bo