誤ったトリガーを回避しながら、Web ブラウザーの「戻る」ボタンのクリックを正確に検出するにはどうすればよいですか?

Web ブラウザでの戻るボタンのクリックの検出: 誤ったトリガーへの対処

ユーザーの戻るボタンのクリックを検出しようとする場合、開発者は多くの場合、 window.onbeforeunload イベント。ただし、このアプローチには制限があります。ページの更新など、他のアクションが実行されたときにもトリガーされます。

より包括的な解決策は、戻るボタンのクリックと他のイベントを区別することです:

履歴 API の使用:

このアプローチは、履歴 API (history.pushState 関数) をサポートするブラウザを対象としています:

<code class="js">window.onload = function () {
  if (typeof history.pushState === "function") {
    history.pushState("jibberish", null, null);
    window.onpopstate = function () {
      history.pushState('newjibberish', null, null);
      // Handle back or forward button clicks here (excluding refresh)
    };
  } else {
    ... // Handle non-History API browsers
  }
}</code>

ハッシュ変更の使用:

History API サポートのないブラウザの場合、ハッシュ変更を使用してフォールバック ソリューションを実装できます:

<code class="js">window.onload = function () {
  ... // Similar to History API code
} else {
  var ignoreHashChange = true;
  window.onhashchange = function () {
    if (!ignoreHashChange) {
      ignoreHashChange = true;
      window.location.hash = Math.random();
      // Detect back button click here
      // Note: Messes with hash symbol at the end of URL
    } else {
      ignoreHashChange = false;
    }
  };
}</code>

リフレッシュの問題の処理:

上記の解決策は戻るボタンの検出に対処していますが、ページの更新は処理しません。このために、window.onbeforeunload を引き続き使用できます:

<code class="js">window.onbeforeunload = function (e) {
  if (e.preventDefault) {
    e.preventDefault();
    e.returnValue = '';
  }
}</code>

以上が誤ったトリガーを回避しながら、Web ブラウザーの「戻る」ボタンのクリックを正確に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。