0

I'm working on a script deferrer for WordPress. It takes all of the src attributes for scripts and sets them to null, then, after page interaction, it sets them to their original target. This is all working great, except some scripts rely on events (e.g., load or DOMContentLoaded) to execute, so I need to re-issue those.

There's an answer here that was written in 2018 and updated in April 2021 which says do this:

window.document.dispatchEvent(new Event("DOMContentLoaded", {
  bubbles: true,
  cancelable: true
}));

But it doesn't seem to work (or, at least, the scripts don't respond to it).

My call to the script loader which re-writes the src attributes looks like this:

loadScripts(
    makeGraph(document.querySelectorAll("script[data-type=lazy]")))
    .then(window.dispatchEvent(new Event('DOMContentLoaded',
      {
        bubbles: true,
        cancelable: true
      })))
    .then(window.dispatchEvent(new Event('load')))
    .then(console.log('success'))
    .catch(console.error);

The promise chain always makes it through and logs success.

If I take a piece of JavaScript that's under my control and tell it to alert on those events:

 window.addEventListener( 'load', () => {
    alert('I loaded!');
  })
 alert('I loaded 2');
 window.addEventListener( 'DOMContentLoaded', () => {
    alert('DOM Content loaded!');
 });

I get an alert for "I loaded 2", so it is properly loading the script after I set the src attribute, but the events aren't being caught. Conversely, if I remove my script that's deferring things, and let the scripts load as WordPress would normally have it, the eventListeners fire.

I've also tried attaching the dispatchEvent to both window and window.document and it doesn't seem to make a difference.

This is true at least on Chrome and Safari. So, is there a way to get the "native" events that happen during the course of loading a page to re-fire?

philolegein
  • 1,099
  • 10
  • 28
  • "*some scripts rely on events like `load` or `DOMContentLoaded` to execute*" - you might rather want to fix those scripts. A script might always be loaded after the DOM is complete, it should test for that and then run immediately instead of installing an event listener. – Bergi Jun 18 '22 at 11:56
  • `then` takes a function as the argument. You call `dispatchEvent` **immediately** (and pass its result to `then`), not when the promise fulfills. Same for the `console.log` call. – Bergi Jun 18 '22 at 11:58
  • @Bergi, re: the first point, for scripts that are in my control, of course; but not all are (e.g., this is a WordPress site and will be loading jQuery). I don't understand your second point. Isn't `dispatchEvent` a function that I'm passing to `then` right after my promise from my `loadScripts` returns? – philolegein Jun 21 '22 at 06:16
  • jQuery has no problem with being loaded dynamically, and through `$.ready` it also has a feature to run code on DOMready or immediately if that has already happened. – Bergi Jun 21 '22 at 20:01
  • 1
    "*Isn't `dispatchEvent` a function*" - `dispatchEvent` would be a function, but you're not passing that - you're passing `dispatchEvent(…)`! That's not a callback function. Use `.then(() => { window.dispatchEvent(new Event('DOMContentLoaded', {bubbles: true, cancelable: true})); window.dispatchEvent(new Event('load')); console.log('success'); }).catch(console.error);` – Bergi Jun 21 '22 at 20:03

0 Answers0