I am looking at one of our user’s websites right now, and this is the offending code:
if (window.two_page_loaded) {
console.log("dispatching events");console.log("Dispatching DOMContentLoaded event");document.dispatchEvent(new Event("DOMContentLoaded"));console.log("Dispatching Load event");window.dispatchEvent(new Event("load"));console.log("Dispatching ClickOrTouch event");two_loading_events(two_event);
}
else {
console.log("waiting for page to load");
window.addEventListener("load", function() {
console.log("dispatching events");
document.dispatchEvent(new Event("DOMContentLoaded"));
});
}
Our plugin already defers its script by waiting until DOMContentLoaded is fired. This code is triggering DOMContentLoaded immediately on its own, which causes our script to fire twice. DOMContentLoaded should not be manually triggered, and I’m sure this is causing issues with lots of other plugins and scripts. A custom event name should be used instead so that it does not corrupt the normal expected pattern of page loading behavior.
Hi @bensibley ,
Thank you for reaching out and providing details about the issue.
We do defer the normal loading of all JavaScript files, which is why we trigger the DOMContentLoaded event. However, we understand that this might be affecting the behavior of your plugin.
To investigate this further and work on a potential fix, could you provide us with a WordPress setup where your plugin is enabled and configured? This will help us debug the issue more efficiently.
Looking forward to your response.
Regards, Mane
Hi Mane,
Here is an example site where you can see this happening: https://oxykfjk3fi-staging.onrocket.site/. It is only running Independent Analytics and 10WebBooster.
We delay our inline script by calling it only once DOMContentLoaded is triggered. As a critical part of the page loading process, DOMContentLoaded shouldn’t be triggered manually by any plugins. Instead, you can use your own custom event.
Dear @bensibley ,
Thanks for sharing the details!
It looks like the code provided is outdated. If the event is firing multiple times, you can prevent this by using a simple boolean flag as a semaphore. Here’s an approach you can try:
let isAlreadyFired = false;
document.addEventListener("DOMContentLoaded", function () {
if (isAlreadyFired) return;
isAlreadyFired = true;
// Your script execution here
});
This ensures that the script runs only once when DOMContentLoaded is triggered. Here is a recording. Let me know if you need further adjustments!
Regards, Mane
The code I provided is not outdated. I linked to a website that is running the latest version of 10WebBooster, and that exact code is live right now. It’s using the unedited default settings.
Yes, we can code defensively and check to make sure DOMContentLoaded isn’t loaded more than once, but that shouldn’t be necessary. I am sure that 10WebBooster is causing many other scripts to run twice, and not every plugin should have to be updated to deal with an unusual modification to the normal page loading process. What if our plugin fired DOMContentLoaded manually too? Then you would have to add a check in your plugin as well to make sure it doesn’t get triggered a third time. We all need to stick to best practices when developing our plugins to avoid these types of unnecessary issues.
Dear @bensibley ,
While we understand your request, we ask you to make the changes requested in the recording to prevent the conflicts.
At this point, this is the solution we can offer. We hope it resolves the issue, but please don’t hesitate to reach out if you need any further assistance.
Regards, Mane
