how to listen for changes to the title element?

问题:

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

回答1:

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:

回答2:

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

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();             }         };     } }; 

回答3:

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 

回答4:

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(); })(); 

文章来源: how to listen for changes to the title element?