JavaScript WEB API MutationObserver URL change

Question

I'm new to JS and WEB APIs, is it possible to use MutationObserver to observe page URL mutation? or MutationObserver is used only for DOM?

Answer 1

If you target the body of the document and use configs as subtree and childList true, then it will trigger every time there are changes on that body element.

Since every URl will have different content in the body, it will observe those changes.

Your code will be something like this:

const config = {
   childList: true,
   subtree: true
 };
const obs = new MutationObserver(callback);
   function callback() {
     // your function 
   }

function runMutation() {
   const myInterval = setInterval(() => {
        const el = document.querySelector("body");
        if (el) {
            clearInterval(myInterval);
            obs.observe(el, config);
            callback();
        }
   }, 500);
}
runMutation();