Bagaimana untuk Mengesan Perubahan dalam `location.href` Menggunakan MutationObserver dalam Skrip Greasemonkey?

Mendengarkan Location.href menukar acara

Apabila menulis skrip Greasemonkey, kadangkala anda perlu melakukan operasi tertentu apabila tapak web mengubah suai location.href . Artikel ini menerangkan cara untuk bertindak balas terhadap perubahan ini menggunakan pemerhati mutasi DOM dan bukannya tamat masa dan tinjauan pendapat yang memakan masa.

Penyelesaian

<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>

Skrip ini menggunakan pemerhati mutasi DOM untuk mendengar perubahan di seluruh dokumen, termasuk perubahan dalam elemen badan. Apabila perubahan location.href dikesan, ia akan mencetuskan fungsi panggil balik pemerhati, di mana anda boleh melakukan apa sahaja tindakan yang anda mahu.

Dengan spesifikasi JavaScript terkini

<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>

Skrip ini menggunakan spesifikasi JavaScript terkini dengan fungsi anak panah ES6 dan kaedah pemerhatian. Ia bersamaan dengan skrip di atas dan menyediakan cara yang lebih bersih untuk mendengar perubahan location.href.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Perubahan dalam `location.href` Menggunakan MutationObserver dalam Skrip Greasemonkey?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!