JavaScript에서 URL 변경을 감지하고 응답하는 방법은 무엇입니까?

URL 변경 시 이벤트를 트리거하는 방법

window.location.href를 주기적으로 수정하는 웹사이트용 Greasemonkey 스크립트를 개발할 때 다음과 같습니다. 이러한 URL 변경에 대응하여 특정 작업을 수행하는 데 필요한 경우가 많습니다. 그러나 폴링이나 타임아웃을 잠재적인 해결책으로 활용하는 것은 비효율적일 수 있습니다.

이러한 문제를 방지하기 위해 MutationObserver API를 활용하는 매우 효과적인 방법을 제시합니다. 본문 요소 내의 변경 사항을 모니터링함으로써 이 스크립트는 URL 수정을 효과적으로 감지하고 수정된 문서의 DOM에 대한 액세스를 제공할 수 있습니다.

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;
            /* Insert your code here */
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};

또는 보다 간결하고 현대적인 접근 방식을 선호하는 경우 다음을 사용할 수 있습니다. 최신 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;
      /* Insert your code here */
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;

이 방법을 사용하면 URL이 변경될 때 트리거되는 이벤트에 원하는 기능을 첨부하여 수정된 문서의 DOM에 대한 액세스를 제공할 수 있습니다.

위 내용은 JavaScript에서 URL 변경을 감지하고 응답하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!