通过Javascript检测文档标题的更改
Detect change in document title via Javascript
是否有任何方法可以通过Javascript检测对document.title
/head > title
的更改?我想通过Google Chrome扩展内容脚本来检测这一点,所以我真的无法在执行实际标题更改的目标页面的JS中连接代码。
我找到了WebKitMutationObserver,理论上它应该能够检测到head > title
的更改,但它并不适用于所有情况:
// 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';
有什么想法吗?
我找到了一个完全可行的解决方案,它只是对我在原始文章中发布的示例的一个小修改。
// 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
添加subtree: true
是使其正常工作所需要的全部。
最后在setTimeout
调用中包装三个标题更改方法只是为了演示;如果没有这一点,标题值变化如此之快,以至于WebKitMutationObserver不会单独报告每个变化,因为MutationObserver被设计为在执行observer回调之前在短时间内累积变化。
如果不需要检测通过最后一个jQuery only方法进行的标题更改,则可以从observer.observe
行中省略childList: true
属性;仅需要CCD_ 8来检测前两种标题改变方法。
您的代码示例中同时包含JQuery和Javascript。不确定您是否仅限于JavaScript,但以下是如何使用jQuery
如果您想触发更改,请查看:http://api.jquery.com/trigger/
jQuery
$(document).ready(function () {
$("title", "head").change(function () {
console.log("Title has changed");
});
//Trigger Change
$("title","head").text("New Title").trigger("change");
});
相关文章:
- 通过Javascript检测文档标题的更改
- 单击链接时如何更改文档标题
- 如何通过函数动态更改文档标题
- Sharepoint文档库-使用javascript从文件名到标题
- 文档标题不是文档<标题>
- 杜兰达尔多语言应用程序,页面/模块标题作为可观察的,动态更改文档.标题
- 使用 JavaScript 获取文档标题元
- 使用 javascript 将文档标题更改回去
- 搜索文档并查找所有带有标题的输入
- 用于添加标题的脚本及其对 HTML 文档中所有锚标记的值
- Html更改文档'的标题
- 当标题被另一个脚本更改时,更改文档标题
- 引导类文档(例如容器流体/导航栏标题/)
- 文档标题在ie8中更改哈希
- 如何防止任何iframe或任何其他脚本在顶部窗口更改文档的标题
- 文档.上一页的标题
- 如何从子文档更改文档标题
- 如果没有被我更改,请替换文档标题
- 文档.标题返回未定义.这是为什么?
- 文档标题不会停止闪烁