How load script tag as DOM element and run as if it was placed in head tag

Question

I'm looking for a way in the purpose to speed up site loading and postpone non-urgent scripts. I need to load a script on button click as it placed in Head tag <script ...>.

async function do_script_load() {
    var script = document.createElement("script");
    script.src = "https://web.webformscr.com/apps/fc3/build/loader.js";
    script.type = "text/javascript";
    script.setAttribute("async", "");
    await item.parentElement.querySelector(".n-bell-bubble").appendChild(script); 
    
    do_other_stuff();
 }

addEventListener( "click" , () => {
    do_script_load()
})

The problem is that the script get loaded but it is not being started. I'm looking for a way to run the script as a script added as used to.

<head>
    <script src="..." async></script>

Any [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) set? Does your browser's console say anything? — Kaiido, Jan 25 '22 at 08:48
This might not be possible since the click event will always happen _after_ the head element is parsed/run. — evolutionxbox, Jan 25 '22 at 08:49
@Kaiido what is it CSP? Devtool console doesnt say anything, no errors happens. It just loading the script, but it doesnt work further — Alexey Nikonov, Jan 25 '22 at 08:50
@evolutionxbox yes, correct, I need it get run after all document is loaded and user clicked the button — Alexey Nikonov, Jan 25 '22 at 08:50
Does this answer your question? [Call javascript function after script is loaded](https://stackoverflow.com/questions/14644558/call-javascript-function-after-script-is-loaded) — evolutionxbox, Jan 25 '22 at 08:51
I linked to https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP in an edit to my first comment. What do you mean by "load" here? How do you know it gets loaded? What is it supposed to do that it doesn't do. (From a quick look at it it seems it's supposed to load an other — Kaiido, Jan 25 '22 at 08:51
@evolutionxbox what OP is doing should work just fine, you can append whatever you want in the even after the doc is fully parsed, and appending a script element like this should execute it, if no CSP is there to block it. That other Q.A you linked to tried to execute a callback once the loaded script got executed. Here OP is having trouble executing the script itself. — Kaiido, Jan 25 '22 at 08:53

Kaiido · Accepted Answer · 2022-01-25T11:57:14.543

The script you are loading is listening for the window's load event to execute.
(from https://web.webformscr.com/apps/fc3/build/loader.js)

window.addEventListener("load",e,!1)

This event is long fired when you do append the script, and hence it will wait for something that already did happen.
You can quick-fix this by adding a load event handler on your <script>and fire a new load event on the window when this happens:

script.addEventListener("load", e => window.dispatEvent(new Event("load")));

Though it seems we need some other elements in the page with sp-form-id attributes that I don't know of and thus couldn't test myself.

But if you can reach to the author of this script you load, then you should ask them to expose a method to initialize it without having to fire this event, since other parts of your page may very well rely on the fact that this event is only supposed to fire once.

Also note that you may want to pass a { once: true } option to your click listener to avoid loading this script every time the user clicks.

@AlexeyNikonov I meant "`script.addEventListener("load",`", this waits for your ` — Kaiido, Jan 25 '22 at 11:58
You were right, the script waits for Load event, but it doesnt need to addEventListener. It does work and loads successfully with **dispatchEvent(new Event('load'))**; — Alexey Nikonov, Jan 25 '22 at 16:52

How load script tag as DOM element and run as if it was placed in head tag

1 Answers1