通过Javascript检测文档标题中的更改 [英] Detect change in document title via Javascript

问题描述

有没有办法检测到对 document.title / head>的更改。 title 通过Javascript？我想通过谷歌浏览器扩展内容脚本来检测这一点，所以我不能真正连接目标页面的JS中执行实际标题更改的代码。

我发现WebKitMutationObserver理论上应该能够检测到对 head>的更改。 title ，但它不适用于所有情况：

  //设置一个观察者title元素
 var target = document.querySelector（'title'）; 
 var observer = new WebKitMutationObserver（function（mutations）{
 mutations.forEach（function（mutation）{
 console.log（mutation）; 
}）; 
 }）; 
 var config = {attributes：true，childList：true，characterData：true}; 
 observer.observe（target，config）; 
 
 //这个jQuery语句按预期触发观察者... 
 $（'head> title'）。text（'foo'）; 
 
 // ...但这不是：
 document.querySelector（'title'）。innerText ='cheezburger'; 
 
 // ...并且这也不是：
 document.title ='lorem ipsum'; 
  

有什么想法？

解决方案

 <$> 
 
 c $ c> //为标题元素设置一个观察者
 var target = document.querySelector（'head> title'）; 
 var observer = new window.WebKitMutationObserver（function（mutations）{
 mutations.forEach（function（mutation）{
 console.log（'new title：'，mutation.target.textContent） ; 
}）; 
}）; 
 observer.observe（target，{subtree：true，characterData：true，childList：true}）; 
 
 //所有这三种方法都正确地激发了变异观察者
 setTimeout（function（）{document.title ='foo';}，1000）; //通常的方法
 setTimeout（function（）{document.querySelector（'head> title'）。innerText ='bar';}，2000）; // DOM方法
 setTimeout（function（）{$（'head> title'）。text（'cheezburger'）;}，3000）; //仅限jQuery方法
  

添加子树：true 是获得这个工作权利所需的全部。

在 setTimeout 中封装了三个标题更改方法最后的c $ c>调用仅用于演示目的;如果没有这个标题值变化太快，WebKitMutationObserver不会单独报告每个变化，因为MutationObserver被设计为在执行观察者回调之前在短时间内累积变化。

如果不需要检测通过最后一个jQuery-only方法所做的标题更改，则可以从观察者中省略 childList：true 属性。观察行;只需要 characterData：true 来检测前两个标题改变方法。

Is there any way to detect a change to document.title / head > title via Javascript? I want to detect this via a Google Chrome extension content script, so I can't really wire up code in the target page's JS where the actual title change is performed.

I've found WebKitMutationObserver which theoretically should be able to detect a change to head > title, but it doesn't work for all cases:

// set up an observer for the title element
var target = document.querySelector('title');
var observer = new WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation);
    });
});
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);

// this jQuery statement fires the observer as expected ...
$('head > title').text('foo');

// ... but this doesn't:
document.querySelector('title').innerText = 'cheezburger';

// ... and neither does this:
document.title = 'lorem ipsum';

Any ideas?

解决方案

I have found a fully working solution which is only a small modification to the example I posted in the original post.

// set up an observer for the title element
var target = document.querySelector('head > title');
var observer = new window.WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log('new title:', mutation.target.textContent);
    });
});
observer.observe(target, { subtree: true, characterData: true, childList: true });

// all three of these methods correctly fire the mutation observer
setTimeout(function() { document.title = 'foo'; }, 1000); // the usual method
setTimeout(function() { document.querySelector('head > title').innerText = 'bar'; }, 2000); // DOM method
setTimeout(function() { $('head > title').text('cheezburger'); }, 3000); // jQuery-only method

The addition of subtree: true was all that was needed to get this working right.

The wrapping of the three title-changing methods in setTimeout calls at the end is just for demonstration purposes; without this the title value changes so quickly that the WebKitMutationObserver doesn't report each change individually, since MutationObserver is designed to accumulate changes over a short period before executing the observer callback.

If one does not need to detect title changes made via the last jQuery-only method, the childList: true property can be omitted from the observer.observe line; only characterData: true is needed to detect the first two title-changing methods.

这篇关于通过Javascript检测文档标题中的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！