通过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屋!