Search code examples
javascriptdom-eventsdomcontentloaded

How to detect each page load?

I'm trying to catch each page load on https://forum.vivaldi.net

//==UserScript==
//@include https://forum.vivaldi.net/*
//==/UserScript==
(function () {
    window.addEventListener('DOMContentLoaded', function () {
        alert('A new page is loaded');
    });
})();

This will fire each time I hit enter in the address bar.

But nothing happens when I navigate from one page to another in the forum.

Why isn't DOMContentLoaded firing at each page load?

Solution

  • That site uses Ajaxify to automatically convert all intra-site links to XHR requests. DOMContentLoaded isn’t firing between pages because there is no new page loading - just content downloading in the background and being inserted into the current page.

    You can see this in action by following the activity in the Network tab of your browser’s developer tools.

    As for how to catch each page load in this instance, check out the events exposed by Ajaxify.