Menu
Is there a way to load and execute a javascript file in a synchronous way just like a synchronous XMLHttpRequest?
I'm currently using a sync XMLHttpRequest and then eval for this, but debugging that code is very difficult...
Thanks for your help!
Update
I tried this now:
test.html
<html> <head> <script type="text/javascript"> var s = document.createElement("script"); s.setAttribute("src","script.js"); document.head.appendChild(s); console.log("done"); </script> </head> <body> </body> </html> script.js
console.log("Hi"); Output: done Hi
So it was not executed synchronously. Any idea to make "Hi" appear first?
Update 2 Other example
test.html (code inside a script tag)
var s = document.createElement("script"); s.setAttribute("src","script.js"); document.head.appendChild(s); SayHi(); script.js
function SayHi(){ console.log("hi"); } Output: Uncaught ReferenceError: SayHi is not defined
937
Freshmarketer JS script can be loaded and executed in two ways: Synchronous code: Scripts are loaded and executed sequentially along with the other web page components. Each time a function is called, the program execution waits until the function is returned before executing the next line of code.
When a script is asynchronous, it will load simultaneously with other scripts, like this: You can see in the diagram, that scripts 2 and 3 are now able to load at the same time, which speeds up the overall loading of a page.
Every line of code waits for its previous one to get executed first and then it gets executed. Asynchronous JavaScript: Asynchronous code allows the program to be executed immediately where the synchronous code will block further execution of the remaining code until it finishes the current one.
If you use this:
function loadScriptSync (src) { var s = document.createElement('script'); s.src = src; s.type = "text/javascript"; s.async = false; // <-- this is important document.getElementsByTagName('head')[0].appendChild(s); } You can do what you want (although divided up in an additional script file)
test.html (code inside a script tag):
loadScriptSync("script.js"); loadScriptSync("sayhi.js"); // you have to put the invocation into another script file script.js:
function SayHi() { console.log("hi"); } sayhi.js:
SayHi(); All scripts which are loaded after DOM is ready are loaded asynchronously. The only reason for browser to load them synchronously is function write which can output something. So you can use onload callback of the script element to achieve what you want.
var s = document.createElement("script"); s.setAttribute("src","script.js"); s.onload = function(){ console.log('Done'); } document.head.appendChild(s); Another way is to load js-file via XHR and set code inside the script element:
window.onload = function(){ var req = new XMLHttpRequest(); req.open('GET', "test.js", false); req.onreadystatechange = function(){ if (req.readyState == 4) { var s = document.createElement("script"); s.appendChild(document.createTextNode(req.responseText)); document.head.appendChild(s); } }; req.send(null); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
