> 웹 프론트엔드 > JS 튜토리얼 > Greasemonkey 스크립트에서 MutationObserver를 사용하여 `location.href`의 변경 사항을 감지하는 방법은 무엇입니까?

Greasemonkey 스크립트에서 MutationObserver를 사용하여 `location.href`의 변경 사항을 감지하는 방법은 무엇입니까?

DDD
풀어 주다: 2024-10-27 20:30:30
원래의
395명이 탐색했습니다.

How to Detect Changes in `location.href` Using MutationObserver in Greasemonkey Scripts?

Location.href 변경 이벤트 수신

Greasemonkey 스크립트를 작성할 때 웹사이트에서 location.href를 수정할 때 특정 작업을 수행해야 하는 경우가 있습니다. . 이 문서에서는 시간이 많이 걸리는 시간 초과 및 폴링 대신 DOM 돌연변이 관찰자를 사용하여 이러한 변경에 대응하는 방법을 설명합니다.

해결책

<code class="js">window.onload = function() {
    var bodyList = document.querySelector('body');

    var observer = new MutationObserver(function(mutations) {
        if (oldHref != document.location.href) {
            oldHref = document.location.href;
            // 执行相关的操作
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};</code>
로그인 후 복사

이 스크립트는 DOM 돌연변이 관찰자를 사용하여 본문 요소 내의 변경 사항을 포함하여 문서 전체의 변경 사항을 수신합니다. location.href 변경이 감지되면 원하는 작업을 수행할 수 있는 관찰자 콜백 함수가 트리거됩니다.

최신 JavaScript 사양

<code class="js">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;
      // 执行相关的操作
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;</code>
로그인 후 복사

이 스크립트는 ES6 화살표 기능 및 관찰 메소드와 함께 최신 JavaScript 사양을 사용합니다. 이는 위의 스크립트와 동일하며 location.href 변경 사항을 수신하는 더 깔끔한 방법을 제공합니다.

위 내용은 Greasemonkey 스크립트에서 MutationObserver를 사용하여 `location.href`의 변경 사항을 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿