Jump to content

How to include a javascript in another javascript


Recommended Posts

Hi,I try to include a javascript in another javascript, but it does not work. Below is my code, all 3 files are in the same folder. Please help to indicate the error:a.js:function disp_alert(txt){ alert(txt)}b.js:document.write('<script type="text/javascript" src="' + a.js + '"></script>'); test_js_in_js.htm:<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Test js in js</title><script language="JavaScript" type="text/javascript" src="b.js"> </script ></head><body><input type="button" onclick="disp_alert('Alert 1')" value="Click me to display alert box 1" /></body></html>When I click the button, it does not show alert. If I replace b.js with a.js in the htm file, then it works. What is wrong? in b.js or in the htm file?Thanks for help!Harvey

Link to post
Share on other sites

Don't use document.write. Use the innerHTML property of something like the body.

<body id="thebody"><script type="text/javascript">document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></script>";</script></body>

Link to post
Share on other sites

And anyway, you need to include "a.js" as part of the string in the document.write() method of b.js

document.write('<script type="text/javascript" src="a.js"></script>');

Link to post
Share on other sites
Don't use document.write. Use the innerHTML property of something like the body.
<body id="thebody"><script type="text/javascript">document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></script>";</script></body>

I have some troubles when using your code. If the code is:<body id="thebody"><script type="text/javascript"> document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></script>"</script><input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" /></body>The page displayes as:" then, the-button [Display alert box 1]Why is " shown up? the button still does not work. Did I do anything wrong? Thanks!
Link to post
Share on other sites

That was a really bad idea. Note: it's not a good idea to change the innerHTML property of the body onload. There is something going on with the order of events that happen where the innerHTML property might not be set by the time the script runs. I have this page:

<html>  <head>	<title>JS test</title>	<script type="text/javascript">	function add_script()	{	  document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></script>";	}	</script>  </head>  <body id="thebody" onload="add_script()">	<input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" />  </body></html>

Pretty basic. When I look at it in the browser I see this:"; }followed by the button. When I view the source code after Javascript modification, it looks like this:

<html>  <HEAD>	<TITLE>JS test</TITLE>	<script type="text/javascript">	function add_script()	{		  document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></SCRIPT><BODY id="thebody" onload="add_script()">";	}	    	<INPUT type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1">  </BODY></html>

The end of the head and the beginning of the body are now gone, and it stuck the body tag inside the string in the script. I'm not sure specifically why but I bet it's a concurrency issue. I changed it to this instead and it works:

<html>  <head>	<title>JS test</title>	<script type="text/javascript">	function add_script()	{		  head = document.getElementsByTagName('head')[0];		  e = document.createElement('script');	// create a script element		  e.type = 'text/javascript';	// set the type of the script		  e.src = 'a.js';	// point the script tag at your js file		  head.appendChild(e);	}	</script>  </head>  <body onload="add_script()">	<input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" />  </body></html>

Ahh, it looks like the script tag in the string was messing up the HTML parsing. This works:

<html>  <head>	<title>JS test</title>	<script type="text/javascript">	function add_script()	{		  document.getElementById("thebody").innerHTML += "<scr" + "ipt type=\"text/javascript\" src=\"a.js\"></scr" + "ipt>";	}	</script>  </head>  <body id="thebody" onload="add_script()">	<input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" />  </body></html>

When I look at the generated source code I do see the new script tag at the end of the body, but it does not include the Javascript file and define the function, so the button still doesn't work. Adding the script to the DOM as above does work correctly though.

Link to post
Share on other sites
That was a really bad idea. Note: it's not a good idea to change the innerHTML property of the body onload. There is something going on with the order of events that happen where the innerHTML property might not be set by the time the script runs. I have this page:
<html>  <head>	<title>JS test</title>	<script type="text/javascript">	function add_script()	{	  document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></script>";	}	</script>  </head>  <body id="thebody" onload="add_script()">	<input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" />  </body></html>

Pretty basic. When I look at it in the browser I see this:"; }followed by the button. When I view the source code after Javascript modification, it looks like this:

<html>  <HEAD>	<TITLE>JS test</TITLE>	<script type="text/javascript">	function add_script()	{		  document.getElementById("thebody").innerHTML += "<script type=\"text/javascript\" src=\"a.js\"></SCRIPT><BODY id="thebody" onload="add_script()">";	}	    	<INPUT type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1">  </BODY></html>

The end of the head and the beginning of the body are now gone, and it stuck the body tag inside the string in the script. I'm not sure specifically why but I bet it's a concurrency issue. I changed it to this instead and it works:

<html>  <head>	<title>JS test</title>	<script type="text/javascript">	function add_script()	{		  head = document.getElementsByTagName('head')[0];		  e = document.createElement('script');	// create a script element		  e.type = 'text/javascript';	// set the type of the script		  e.src = 'a.js';	// point the script tag at your js file		  head.appendChild(e);	}	</script>  </head>  <body onload="add_script()">	<input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" />  </body></html>

Ahh, it looks like the script tag in the string was messing up the HTML parsing. This works:

<html>  <head>	<title>JS test</title>	<script type="text/javascript">	function add_script()	{		  document.getElementById("thebody").innerHTML += "<scr" + "ipt type=\"text/javascript\" src=\"a.js\"></scr" + "ipt>";	}	</script>  </head>  <body id="thebody" onload="add_script()">	<input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" />  </body></html>

When I look at the generated source code I do see the new script tag at the end of the body, but it does not include the Javascript file and define the function, so the button still doesn't work. Adding the script to the DOM as above does work correctly though.

The code with ... e.src = 'a.js'; head.appendChild(e); ...works just fine. However, the last code still does not work when I try. Does it depend on the server? I have IIS 6. Thanks a lot! At least, I've got one that works.Harvey
Link to post
Share on other sites

The last code isn't going to run the Javascript. It does add the script element to the end of the body as HTML code, but the browser doesn't see that and get the script file. So you can use that to write content at the end of the body, but not for scripts. To add a new script use the code that adds a new script element to the head.

Link to post
Share on other sites
post your current code for all files involved.
total 3 files --#1. js2.htm:<html> <head> <title>js-in-js test</title> <script type="text/javascript" src="b.js"> </script> </head> <body onload="add_script()"> <input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" /> </body></html>#2 a.js:function disp_alert(txt){ alert(txt)}#3 b.js:function add_script(){ head = document.getElementsByTagName('head')[0]; e = document.createElement('script'); // create a script element e.type = 'text/javascript'; // set the type of the script e.src = 'a.js'; // point the script tag at your js file head.appendChild(e);}The above b.js works well. The following b.js does not work:function add_script(){ document.getElementById("thebody").innerHTML += "<scr" + "ipt type=\"text/javascript\" src=\"a.js\"></scr" + "ipt>";}The web page's status bar shows: "Done, but with error on page". What is wrong?
Link to post
Share on other sites
total 3 files --#1. js2.htm:<html> <head> <title>js-in-js test</title> <script type="text/javascript" src="b.js"> </script> </head> <body onload="add_script()"> <input type="button" onclick="disp_alert('Alert 1')" value="Display alert box 1" /> </body></html>#2 a.js:function disp_alert(txt){ alert(txt)}#3 b.js:function add_script(){ head = document.getElementsByTagName('head')[0]; e = document.createElement('script'); // create a script element e.type = 'text/javascript'; // set the type of the script e.src = 'a.js'; // point the script tag at your js file head.appendChild(e);}The above b.js works well. The following b.js does not work:function add_script(){ document.getElementById("thebody").innerHTML += "<scr" + "ipt type=\"text/javascript\" src=\"a.js\"></scr" + "ipt>";}The web page's status bar shows: "Done, but with error on page". What is wrong?
In your second attempt you use getElementById looking for the tag with the id "thebody", but in your example you haven't given anything that id.Having fixed that though, it still won't work - Firefox, java script: window reports disp_alert being undefined even though it is definitely add_script. Adding scripts after the page has loaded this way doesn't seem to work.Kevin
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...