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

mutationobserver class change (3)

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

In short:

new MutationObserver(function(mutations) {
    { 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

// 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:

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;
    if (document.title !== oldTitle)
        //title has changed - do something
    oldTitle = document.title;
}, 100); //check every 100ms

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.


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 =;
            if (t === titleEl || (t.parentNode && t.parentNode === titleEl)) {
        }, false);
    } else {
        document.onpropertychange = function() {
            if (window.event.propertyName == "title") {