javascript js - how to listen for changes to the title element?




position dom (5)

This's my way, in a closure and check in startup

(function () {
    var lastTitle = undefined;
    function checkTitle() {
        if (lastTitle != document.title) {
            NotifyTitleChanged(document.title); // your implement
            lastTitle = document.title;
        }
        setTimeout(checkTitle, 100);
    };
    checkTitle();
})();

In javascript, is there a technique to listen for changes to the title element?


There's not a built-in event. However, you could use setInterval to accomplish this:

var oldTitle = document.title;
window.setInterval(function()
{
    if (document.title !== oldTitle)
    {
        //title has changed - do something
    }
    oldTitle = document.title;
}, 100); //check every 100ms

5 years later we finally have a better solution. Use MutationObserver!

In short:

new MutationObserver(function(mutations) {
    console.log(mutations[0].target.nodeValue);
}).observe(
    document.querySelector('title'),
    { subtree: true, characterData: true }
);

With comments:

// select the target node
var target = document.querySelector('title');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    // We need only first event and only new value of the title
    console.log(mutations[0].target.nodeValue);
});

// configuration of the observer:
var config = { subtree: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

Also Mutation Observer has awesome browser support:


You can do this with events in most modern browsers (notable exceptions being all versions of Opera and Firefox 2.0 and earlier). In IE you can use the propertychange event of document and in recent Mozilla and WebKit browsers you can use the generic DOMSubtreeModified event. For other browsers, you will have to fall back to polling document.title.

Note that I haven't been able to test this in all browsers, so you should test this carefully before using it.

UPDATE 9 APRIL 2015

Mutation Observers are the way to go in most browsers these days. See Vladimir Starkov's answer for an example. You may well want some of the following as fallback for older browsers such as IE <= 10 and older Android browsers.

function titleModified() {
    window.alert("Title modifed");
}

window.onload = function() {
    var titleEl = document.getElementsByTagName("title")[0];
    var docEl = document.documentElement;

    if (docEl && docEl.addEventListener) {
        docEl.addEventListener("DOMSubtreeModified", function(evt) {
            var t = evt.target;
            if (t === titleEl || (t.parentNode && t.parentNode === titleEl)) {
                titleModified();
            }
        }, false);
    } else {
        document.onpropertychange = function() {
            if (window.event.propertyName == "title") {
                titleModified();
            }
        };
    }
};

From the core javascript reference

=== Returns true if the operands are strictly equal (see above) with no type conversion.





javascript javascript-events