JavaScript를 사용하여 웹페이지에서 탐색 변경 사항을 어떻게 감지하고 처리할 수 있습니까?

이벤트 리스너로 탐색 변경 처리

사용자가 웹페이지 내에서 새 URL로 이동할 때 이벤트를 캡처하는 것이 어려울 수 있습니다. 새로 로드된 페이지의 DOM에 액세스합니다. 이 문제를 해결하기 위해 우리는 JavaScript의 강력한 관찰자 API를 사용하는 솔루션을 탐색할 것입니다.

DOM 돌연변이 관찰
시간 초과나 폴링에 의존하는 대신 MutationObserver를 활용하여 변경 사항을 모니터링할 수 있습니다. DOM 트리. <몸> 요소를 사용하면 변경된 location.href로 인해 페이지 콘텐츠가 수정된 시기를 감지할 수 있습니다.

구현 예
다음은 MutationObserver를 사용하여 창을 모니터링하는 방법을 보여주는 코드 조각입니다. .location.href 변경 사항:

<code class="javascript">var oldHref = document.location.href;

window.onload = function() {
    var bodyList = document.querySelector('body');

    var observer = new MutationObserver(function(mutations) {
        if (oldHref != document.location.href) {
            oldHref = document.location.href;
            /* Changed ! your code here */
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};</code>

최신 JavaScript 사양
최신 JavaScript에서는 화살표 함수와 약간 단순화된 구문을 사용하여 동일한 기능을 구현할 수 있습니다.

<code class="javascript">const observeUrlChange = () => {
  let oldHref = document.location.href;
  const body = document.querySelector('body');
  const observer = new MutationObserver(mutations => {
    if (oldHref !== document.location.href) {
      oldHref = document.location.href;
      /* Changed ! your code here */
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;</code>

이 이벤트 기반 접근 방식을 사용하면 폴링이나 시간 초과를 방지하고 효율적이고 안정적인 방식으로 URL 변경 사항을 캡처할 수 있습니다. 이를 통해 새로 로드된 페이지의 DOM에 액세스하고 사용자가 동일한 웹페이지 내에서 탐색할 때마다 원하는 작업을 실행할 수 있습니다.

위 내용은 JavaScript를 사용하여 웹페이지에서 탐색 변경 사항을 어떻게 감지하고 처리할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!