Обнаружить изменение названия документа с помощью Javascript

Есть ли способ обнаружить изменение на document.title/head > title через Javascript? Я хочу обнаружить это через контент расширения Google Chrome script, поэтому я не могу подключить код на целевой странице 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';

Любые идеи?

Ответы

Ответ 1

Я нашел полностью рабочее решение, которое является лишь небольшой модификацией к примеру, опубликованному в исходном сообщении.

// 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, свойство childList: true можно исключить из строки observer.observe; требуется только characterData: true для обнаружения первых двух методов смены названия.

Ответ 2

В вашем примере кода есть как 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");
});