[英]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旨在在執行觀察者回調之前的短時間內累積更改。
如果不需要檢測通過最后一個jQuery-only方法進行的標題更改,則可以從observer.observe
行中省略childList: true
屬性; 只需要characterData: true
即可檢測前兩個標題更改方法。
您的代碼示例中同時包含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");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.