我可以在不是我的網站上添加事件監聽器嗎？

Question

我想知道一個不屬於我的站點上的某些DOM元素的所有更改，因此我可以接收有關DOM元素更改的瀏覽器通知。 如果我無法在網站上編寫代碼，我該如何做到這一點？ 我想用這個辦法：

// select the target node 
 
var target = document.getElementById('some-id'); 
 
    
 
// create an observer instance 
 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    console.log(mutation.type); 
 
    });  
 
}); 
 
    
 
// configuration of the observer: 
 
var config = { attributes: true, childList: true, characterData: true }; 
 
    
 
// pass in the target node, as well as the observer options 
 
observer.observe(target, config); 
 
    
 
// later, you can stop observing 
 
observer.disconnect();

<div id="some-id"></div>

謝謝！

Answer 1

可以客戶端代碼總是添加到任何網站。例如，這是瀏覽器擴展的主要行爲。

但你也可以直接把你的代碼並將其粘貼到瀏覽器的控制檯（鉻：按Ctrl + 移 + Ĵ或F12）

在這個例子中，我們將obeserve的<div id="question-header">這個SO頁面。

// select the target node 
var target = document.getElementById('question-header'); 

// create an observer instance 
var observer = new MutationObserver(function(mutations) { 
    Notification.requestPermission(function (permission) { 
    if (permission === "granted") { 
     var notification = new Notification("Something has changed!"); 
    } 
    }); 
    mutations.forEach(function(mutation) { 
    console.log(mutation.type); 
    });  
}); 

// configuration of the observer: 
var config = { attributes: true, childList: true, characterData: true }; 

// pass in the target node, as well as the observer options 
observer.observe(target, config); 

然後執行此來測試它是否工作：

var node = document.createElement("b");     
var textnode = document.createTextNode("Hello new item"); 
node.appendChild(textnode); 
document.getElementById("question-header").appendChild(node); 

Answer 2

你可以做到這一點像這樣的東西：

$(function(){ 
    var keep = ''; 
    var ajaxurl = "http://foo.bar"; 

    setInterval(function(){ 
     $.get(ajaxurl, { sample_data : 'test' }, function(response){ 

      var log = "<p>Checked</p>"; 

      if(keep != '' && keep !== response) 
       log = "<p>Something has changed</p>"; 

       $('.log-container').append(log); 

     }); 

    }, 2000); 
}); 

但你可以做更高級的東西與pusherJS https://github.com/pusher/pusher-js