0

I'm trying to personalize titles for a certain Angular website, but the title does not change back to anything (it persists as the modified state) even after visiting different pages unless. Now, the page itself does NOT refresh when changing pages so the DOM itself is not refreshed (otherwise the title does change); but, the usual behavior is that the title does in fact change whenever a different page is opened regardless of whether or not the page refreshed completely.

This is really all I am doing right now...

let observer = new MutationObserver(function(mutations) {
    let tab_url_split = location.href.split("/")
    if (tab_url_split[3] == "example") {
        document.title = "example title"
    }
});

observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

Expected Behaviour: Title reverts to default (as set by devs) when page changes

Actual Behaviour: Title never changes until I refresh the page.

The website itself is not very complicated so I am considering manually mapping URLs to certain titles if no other solution...

bg9848
  • 322
  • 8
  • 23
  • Your options only observe the change in attributes so if there is no such a change then your observer won't be called. Add `childList:true` and `characterData:true`. Also to state the obvious: if the page doesn't make any DOM mutations after you register the observer then it will never be called so you should additionally modify the title one time at start outside of the observer. Another pitfall is that Angular may be using ShadowDOM so you will have to observe the corresponding node's shadow root. – wOxxOm Apr 09 '20 at 07:16
  • sorry the problem isnt the fact that the code is not being executed. the problem is the title should revert itself back to normal (as the devs intended) when the page changes. If the document.title is never modified, the title changes when the page changes perfectly fine. – bg9848 Apr 09 '20 at 07:22
  • You'll have to revert it yourself because modern sites don't load pages fully, they only change parts, and the title isn't one of those changed parts. Since you're already using MutationObserver you can save the old URL and if it's not equal to location.href then reset the title. – wOxxOm Apr 09 '20 at 07:26
  • yeah but modern sites have dynamic titles and it seems modifying the document.title in this instance negates that. However I did notice that sometimes the expected behavior does occur. I also noticed when I change the title, the title includes quotation marks but the original titles do not. – bg9848 Apr 09 '20 at 07:53
  • A title element is just another element, there's nothing special about it. A modern page may change it on internal "soft" navigation (via History API or hash alterations) or may not, there's no rule about that either. The only fact is that the page doesn't reload fully from the server so it's the same `document` where you should use your MutationObserver to detect the change of the URL and reset the title yourself. See also [Is there a JavaScript / jQuery DOM change listener?](https://stackoverflow.com/a/39508954) – wOxxOm Apr 09 '20 at 07:57

0 Answers0