Question

在javascript中，是否有一种技术可以监听title元素的更改？

Answer 1

5年后，我们终于找到了更好的解决方案。使用MutationObserver！

简而言之：

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

评论：

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

另外Mutation Observer has awesome browser support：

Answer 2

您可以在大多数现代浏览器中使用事件执行此操作（值得注意的例外是Opera和Firefox 2.0及更早版本的所有版本）。在IE中，您可以使用propertychange document事件，在最近的Mozilla和WebKit浏览器中，您可以使用通用DOMSubtreeModified事件。对于其他浏览器，您将不得不回到轮询document.title。

请注意，我无法在所有浏览器中对此进行测试，因此您应该在使用前仔细测试。

2015年4月9日更新

突变观察者是目前大多数浏览器的发展方式。请参阅Vladimir Starkov的答案。您可能希望以下某些内容作为旧版浏览器的回退，例如IE＆lt; = 10和较旧的Android浏览器。

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

Answer 3

没有内置事件。但是，您可以使用setInterval来完成此任务：

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

Answer 4

这是我的方式，在关闭和检查启动

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

Answer 5

别忘了在不再需要时删除监听器。

香草JS：

const observer = new MutationObserver((mutations) => {
     console.log(mutations[0].target.text);
});

observer.observe(document.querySelector("title"), {
  subtree: true,
  characterData: true,
  childList: true,
})

observer.disconnect() // stops looking for changes

或者，如果您使用的React在删除监听器方面确实很整洁，那么我写了这个钩子：

React.useEffect(() => {
    const observer = new MutationObserver(mutations => {
       console.log(mutations[0].target.text)
    })
    observer.observe(document.querySelector("title"), {
        subtree: true,
        characterData: true,
        childList: true,
    })
    return () => observer.disconnect()
}, [defaultTitle, notificationTitle])

Answer 6

const observer = new MutationObserver(([{ target }]) =>
  // Log change
  console.log(target.text),
)

observer.observe(document.querySelector('title'), {
  childList: true,
})

如何监听title元素的更改？

6 个答案:

2015年4月9日更新