jak słuchać zmian w elemencie tytułowym?

W javascript, czy istnieje technika, aby słuchać zmian w tytule elementu?

Author: jedierikb, 2010-03-23
Source

4 answers

5 lat później w końcu mamy lepsze rozwiązanie. Użyj MutationObserver !

W skrócie: 

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

Z komentarzami: 

// 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);

Również Mutation Observer ma niesamowitą obsługę przeglądarki :

 32
Author: Vladimir Starkov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-15 19:42:15

Można to zrobić ze zdarzeniami w większości nowoczesnych przeglądarek(wyjątkami są wszystkie wersje Opery i Firefoksa 2.0 i wcześniejsze). W IE można użyć zdarzenia propertychange z document, a w najnowszych przeglądarkach Mozilla i WebKit można użyć ogólnego zdarzenia DOMSubtreeModified. W przypadku innych przeglądarek będziesz musiał wrócić do polling document.title.

Zauważ, że nie byłem w stanie przetestować tego we wszystkich przeglądarkach, więc powinieneś to dokładnie przetestować przed użyciem.

AKTUALIZACJA 9 KWIETNIA 2015

Mutacja Obserwatorzy są sposobem, aby przejść w większości przeglądarek tych dni. Zobacz odpowiedź Władimira Starkowa na przykład. Możesz również chcieć niektóre z poniższych jako awaryjne dla starszych przeglądarek, takich jak 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();
            }
        };
    }
};
 16
Author: Tim Down,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-09 16:43:46

Nie ma wbudowanego zdarzenia. Jednak możesz użyć setInterval, aby to osiągnąć: 

var oldTitle = document.title;
window.setInterval(function()
{
    if (document.title !== oldTitle)
    {
        //title has changed - do something
    }
    oldTitle = document.title;
}, 100); //check every 100ms
 3
Author: ShZ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-03-23 02:35:32

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();
})();
 0
Author: IlPADlI,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-27 18:53:59