i am learning javascript and want to use synchronous javascript call in my code.
For example i have two scripts, script1.js and script2.js. Here is script1.js:
<script>
var value1="Script 1";
alert(value1);
//calling script2
url="script2.js"
document.write("<scr" + "ipt src=\"" + url + "\"></scr" + "ipt>");
</script>
Here is script2.js
<script>
var value2="Script 2";
</script>
Now my question is can i print value from script2 like if i add this( alert(value2);) in my script1.js.
<script>
var value1="Script 1";
alert(value1);
//calling script2
url="script2.js"
document.write("<scr" + "ipt src=\"" + url + "\"></scr" + "ipt>");
alert(value2);
</script>
I have done this using asychronous js as
var scr = document.createElement('script');
scr.setAttribute('src', url);
var head = document.getElementsByTagName("head")[0];
head.appendChild(scr);
It is working but i want to achieve this synchronously any suggestions??
Thanks in advance
3 Answers 3
When adding a script like you did in the first case, you can only use values from inside script2.js after you open a new script tag.
index.html
<script>
var value1="Script 1";
alert(value1);
//calling script2
url="script2.js"
document.write("<scr" + "ipt src='script2.js'></scr" + "ipt>");
</script>
<script>
alert(value2);
</script>
script2.js
var value2='yes';
Tested locally and verified that it does work (I see an alert with 'yes'), and what you have (all in the same script tag) does not work (throws an exception because value2 is undefined).
8 Comments
</script><script> do stuff here!In javascript, the order of the scripts is always synchronous. Because you added script 2 after initialization, you created a DOM that looks like this.
<html>
<head>
<script>
//script 1
</script>
</head>
<body>
---Body content here
</body>
</html>
<script src="script2.js"/>
Note how you put the script at the end of the page. Because the HTML is read synchronously, script1 will finish executing (including the alert() which will have value2 be undefined because script2 hasn't been parsed yet), then the HTML body will be processed, then script2.js.
If you wish to load a secondary script synchronously in the middle of your current script, you will have to do an XMLHTTPRequest and get the content, then run eval(script_2_content). Eval will in place compile and parse the second script, synchronously.
What you would then be doing is:
<html>
<head>
<script>
//script 1 before loading script 2
//script 2 content
//script 1 content after loading script 2
</script>
</head>
<body>
---Body content here
</body>
</html>
1 Comment
Sounds like you want an asynchronous function, with a callback. (The first answer, shows your example exactly!).
Basically, when the function has finished loading your script, it will call the callback function, where you should be able to run your alert(value2); script.
Otherwise, if you want to use document.write, you have these options:
(I think the problem is, the <script></script> tags in your *.js files, they're not required!)
src1.js
document.write('<script src="src2.js"></script'+'>');
document.write('<script>alert(value2);</script'+'>');
src2.js
var value2 = 'foobar!'
HTML
<html>
<body>
<script src="src1.js"></script>
</body>
</html>
Does this meet your requirements?
<script>and closing tag is</script>