add script dynamically to DOM before other scripts are executed

Question

I do a simple check if js file exists. If not, I try to load it dynamically before other scripts from bottom of a page are loaded. Is it possible to do? Here is fiddle where bottom script is executed before thus giving errors. https://jsfiddle.net/vnfxus56/1/

thank you.

<div id="top">top</div> <script> doesFileExist('https://ajax.googleapis.com/ajax/libs/nonexistingfile.js'); function doesFileExist(urlToFile) { var xhr = new XMLHttpRequest(); xhr.open('HEAD', urlToFile, false); xhr.send(); if (xhr.status == "404") { console.log("File doesn't exist"); var script = document.createElement('script') script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' document.head.append(script) return false; } else { console.log("File exists"); return true; } } </script> <script> //this is printed out of a variable as a bunch of inline jquery code $("#top").fadeOut(); </script>

While it's doing the async xhr thing, the page continues loading. That's why $ isn't defined. You could make this work, but you should change your code so it waits until everything finished loading before executing the page's script. — Gabriel
– Gabriel, Commented Nov 22, 2020 at 14:24
@Gabriel is it possible to make all scripts wait until xhr is finished? Without altering the code of the bottom scripts? — qqmisko
– qqmisko, Commented Nov 22, 2020 at 14:27
Without altering the code at the bottom, no. I'd just wrap everything inside a function and execute it when everything has finished loading. Using promises and the onload event of the script elements is a good option. — Gabriel
– Gabriel, Commented Nov 22, 2020 at 14:33

hamid-davodi · Accepted Answer · 2020-11-22 18:00:12Z

below I posted the code that could await until the "xhr" request is finished. I used the "async functions" concept in javascript that you can read more about it here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

function afterLoad() { console.log('DOM fully loaded and parsed'); $("#top").fadeOut(); }

#top { background-color: green; }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>xhr</title> <link rel="stylesheet" href="style.css"> </head> <body onload="afterLoad()"> <!-- using "onload" method is necessary to run the script after finishing "xhr" --> <div id="top">top</div> <script> let urlToFile = 'https://ajax.googleapis.com/ajax/libs/nonexistingfile.js'; function doesFileExist(urlToFile) { return new Promise(resolve => { var xhr = new XMLHttpRequest(); xhr.open('HEAD', urlToFile, false); xhr.send(); if (xhr.status == "404") { console.log("File doesn't exist"); var script = document.createElement('script'); script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'; script.setAttribute("async", ""); console.log(script); document.body.append(script); // your custom script file var script2 = document.createElement('script'); script2.src = 'myscript.js'; // define the address of your javascript file. script2.setAttribute("async", ""); document.body.append(script2); resolve(false); } else { console.log("File exists"); resolve(true); } }); } async function asyncCall(urlToFile) { console.log('starting'); const result = await doesFileExist(urlToFile); console.log(result); console.log("finished"); } asyncCall(urlToFile); </script> </body> </html>

I think it is useful to mention that I changed your code from two "script" tags to only "one" and used "two" functions in it. one of them works on "xhr" request and adding script tags, and the other forces the code to wait until the xhr request is finished. I added "$("#top").fadeOut();" part of your code to a separate script code that is in the same directory and appended the script tag in first function.

Collectives™ on Stack Overflow

add script dynamically to DOM before other scripts are executed

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related