10

I wonder if it is possible to use MutationObserver to monitor change in window.location.pathname (or window.location.hash).

user2196351
  • 539
  • 5
  • 13

3 Answers3

7

Mutation observers observe the DOM, not objects, and are not relevant here.

Object observers cannot observe location.hash, not because location is a system object or a security risk, but because hash is a synthetic property managed internally by the equivalent of getters and setters.

In your case, you don't need any of that. You can watch for hash changes using the popState event.

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

location.hash = "bar";
"foo"

I don't know what your intent is in watching for changes in location.pathname. That will cause a page reload before your handler has a chance to do anything.

Marc.2377
  • 7,807
  • 7
  • 51
  • 95
4

No - you cannot use MutationObservers

The new EcmaScript 7 (in preview, draft) is going to have Object.observe which will allow you to monitor any object. However, that is in not going to work: observing global objects is a security risk and I doubt that any browser will allow that (Chromium issue 494574).

Also, as other pointed out, window.location is a system object (of type Location Object) so it is not covered by Object.observe.

You can test that with Chrome 43 which already supports Object.observe: kangax.github.io/compat-table/es7/#Object.observe

So the only solution is to watch changes using timeout mechanism or use window.onpopstate (if you need to monitor only hash).

Robert Grezan
  • 1,266
  • 3
  • 13
  • 27
  • 1
    Actually, you **can** observe global objects (other than window), including `location`, as a quick test would verify. What you cannot do is observe `location.hash` and most of the other properties or `location`, because they are not regular properties. –  Aug 22 '15 at 17:30
  • The reasons you are not able to observe window.location using Object.observe() is because window.location returns an object of type Location Object (which is special read-only interface) and not "Standard" Object. – Robert Grezan Aug 22 '15 at 18:53
  • Actually, I observed `location` and it worked fine for non-standard properties such as `foo`. It just doesn't work for the "magic" properties such as `hash`. –  Aug 23 '15 at 03:34
  • The ticket you mention refers to `window`, which is indeed not unobservable, not `window.location`. –  Aug 23 '15 at 03:40
  • 1
    Just for others reading this old answer: `Object.observe` has been [deprecated](https://stackoverflow.com/questions/36258502/why-has-object-observe-been-deprecated/36259138) and I am currently not sure if there is an alternative which covers this case. – M.S. Dec 07 '21 at 19:33
2

window.location.path is not part of the DOM, so you can't use MutationObservers on it.

But you can perform 'dirty checking' :

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

With EcmaScript 7, watching for property changes is supported natively with Object.observe(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe

Lauromine
  • 1,453
  • 9
  • 19
  • So it will be possible to observer window.location using Object.observe(). Is that correct? And it seems like Chrome 43 already supports it: http://kangax.github.io/compat-table/es7/#Object.observe – user2196351 Aug 22 '15 at 15:58
  • Most nowadays browsers are using EcmaScript 5, ES6 is planned for this year and I don't know when will ES7 be available. If you want your code to work on all nowadays browsers, dont use Object.observe() – Lauromine Aug 22 '15 at 16:06
  • 2
    I'm confused. If the pathname changes, won't the page be reloaded before the next check? –  Aug 22 '15 at 17:27
  • Not necessarily. If the pushState is handled by JavaScript, as you would fine in a single-page app, then the page won't be reloaded. – Kevin Farrugia Jan 21 '22 at 11:58