ホームページ >ウェブフロントエンド >jsチュートリアル >「戻る」ボタンのクリックとブラウザのリロードやその他のイベントを区別するにはどうすればよいですか?

「戻る」ボタンのクリックとブラウザのリロードやその他のイベントを区別するにはどうすればよいですか?

Susan Sarandon
Susan Sarandonオリジナル
2024-10-22 12:42:02261ブラウズ

How to Distinguish Back Button Clicks from Browser Reloads and Other Events?

ブラウザでの「戻る」ボタンのクリックを検出する方法

ブラウザ、特に AJAX を利用する Web アプリケーションでの「戻る」ボタンのクリックを検出することには課題があります。 。 window.onbeforeunload イベントは一般にこの目的で使用されますが、ブラウザのリロードなど、望ましくない他のアクションでもトリガーされます。

解決策:

幸いなことに、次のような方法があります。これは、戻るボタンのクリックとリロードやその他のイベントを効果的に区別する洗練されたソリューションです。この問題に対処する修正されたコードは次のとおりです。

<code class="javascript">window.onload = function () {
  if (typeof history.pushState === "function") {
    history.pushState("jibberish", null, null);
    window.onpopstate = function () {
      history.pushState("newjibberish", null, null);
      // Handle back button clicks here
    };
  } else {
    // For older browsers that don't support `pushState`
    var ignoreHashChange = true;
    window.onhashchange = function () {
      if (!ignoreHashChange) {
        ignoreHashChange = true;
        window.location.hash = Math.random();
        // Handle back button clicks here
      } else {
        ignoreHashChange = false;
      }
    };
  }
};</code>

このソリューションは Chrome と Firefox で機能し、誤ったトリガーの可能性を回避しながら、戻るボタンのクリックをより正確に検出する方法を提供します。

以上が「戻る」ボタンのクリックとブラウザのリロードやその他のイベントを区別するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。