Question

我想知道是否可以使用MutationObserver监视window.location.pathname（或window.location.hash）中的更改。

Answer 1

不 - 你不能使用MutationObservers

新的EcmaScript 7（预览版，草稿版）将有Object.observe，可以监控任何对象。但是，这是无法正常工作：观察全局对象存在安全风险，我怀疑任何浏览器都会允许（Chromium issue 494574）。

另外，正如其他人指出的那样，window.location是一个系统对象（类型为Location Object），因此它不在Object.observe覆盖。

您可以使用已支持Object.observe的Chrome 43进行测试：kangax.github.io/compat-table/es7/#Object.observe

所以唯一的解决方案是使用超时机制观察更改或使用window.onpopstate（如果您只需要监视哈希）。

Answer 2

变异观察者观察DOM，而不是对象，并且与此无关。

对象观察者无法观察location.hash，而非，因为location是系统对象或安全风险，但因为hash是由getter和setter等效内部管理的合成属性。

在您的情况下，您不需要任何此类内容。您可以使用 popState事件来查看哈希更改。

window.onpopstate=function() { console.log("foo"); };

location.hash = "bar";
"foo"

我不知道你在location.pathname中观察变化的意图。这将导致在您的处理程序进行任何更改之前重新加载页面。

Answer 3

window.location.path不是DOM的一部分，因此您无法在其上使用MutationObservers。

但你可以进行肮脏的检查＆＃39; ：

function watchPathChanges () {
    var currentPath = window.location.pathname;
    setInterval({
        if(window.location.pathname !== currentPath) {
            currentPath = window.location.pathname;
            //do something when it has changed
        }
    }, 50);
}

使用EcmaScript 7，Object.observe()本身支持查看属性更改： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe

如何使用（或可能）MutationObserver来监视window.location.pathname的变化？

3 个答案: