>  기사  >  웹 프론트엔드  >  뒤로 버튼 클릭과 브라우저 다시 로드 및 기타 이벤트를 구별하는 방법은 무엇입니까?

뒤로 버튼 클릭과 브라우저 다시 로드 및 기타 이벤트를 구별하는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-10-22 12:42:02193검색

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

브라우저에서 뒤로 버튼 클릭을 감지하는 방법

브라우저, 특히 AJAX를 활용하는 웹 애플리케이션에서 뒤로 버튼 클릭을 감지하는 것은 어려운 일입니다. . 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.