Solved

Include external js from a js file

Posted on 2009-05-07
17
1,642 Views
Last Modified: 2012-05-06
Hi all,

I have a large javascript file that I have broken into 3 .js file.

How can I import the other 2 .js files into the main .js file please?

Something like php's include.

hope you can help

thx

st3vo
0
Comment
Question by:ST3VO
  • 9
  • 5
  • 3
17 Comments
 
LVL 14

Accepted Solution

by:
shobinsun earned 250 total points
ID: 24323709
Hi,

To allow that external JavaScript file to cause another to be included, add the following function to that first external JavaScript file:

    <script type="text/javascript">
    // Function to allow one JavaScript file to be included by another.
    // Copyright (C) 2006-08 www.cryer.co.uk
    function IncludeJavaScript(jsFile)
    {
      document.write('<script type="text/javascript" src="'
        + jsFile + '"></scr' + 'ipt>');
    }
    </script>

and then to include a second JavaScript file simply add the line:

    IncludeJavaScript('secondJS.js');

You can use this technique to include as many JavaScript files as you like.


Regards
0
 
LVL 39

Expert Comment

by:abel
ID: 24323710
The general answer would be: no, you cannot do that. That's because there is no such statement.

However, many libraries have come up with their own methods for including javascripts and the most common is to simple document.write the <script> elements. Instead of repeating those discussions, here's a simple how-to: http://www.cryer.co.uk/resources/javascript/script17_include_js_from_js.htm
0
 
LVL 39

Expert Comment

by:abel
ID: 24323714
lol, apparently we use the same google search, shobinsun! Exactly the same code/page... lol
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

Author Comment

by:ST3VO
ID: 24323785
It's not working.

please see code sample attached.
// main.js file:
 
<script type="text/javascript">
function IncludeJavaScript(jsFile)
    {
      document.write('<script type="text/javascript" src="'
        + jsFile + '"></scr' + 'ipt>');
    }
</script>
 
IncludeJavaScript('second.js');
 
//rest of code here.....
 
 
//Then code of second.js
 
var text = new Array();
var header = new Array();
var linka = new Array();
var targa = new Array();
var divtext = new Array();
var divh = new Array();
var objst = new Array();
var objs = new Array();
var objsh = new Array();
 
//It's not working for some reason.

Open in new window

0
 
LVL 39

Expert Comment

by:abel
ID: 24323816
Your IncludeJavaScript statement is placed after the closing </script> tag. Place it in its own script block and you will have some more luck
0
 
LVL 39

Expert Comment

by:abel
ID: 24323827
Btw, you are saying:

"// main.js file:"

do you mean that the <script> tags are placed inside the js file? Because they are invalid there. The <script> tags should be placed in the HTML page instead, under the <head> part of the page.
0
 

Author Comment

by:ST3VO
ID: 24323841
Nope, that didn't work either :o/
0
 
LVL 14

Expert Comment

by:shobinsun
ID: 24323843
Hi

Use following code:

<script type="text/javascript">
function IncludeJavaScript(jsFile)
    {
      document.write('<script type="text/javascript" src="'
        + jsFile + '"></scr' + 'ipt>');
    }
IncludeJavaScript('second.js');
 
//rest of code here.....
 
 
//Then code of second.js
 
var text = new Array();
var header = new Array();
var linka = new Array();
var targa = new Array();
var divtext = new Array();
var divh = new Array();
var objst = new Array();
var objs = new Array();
var objsh = new Array();
 
//It's not working for some reason.
</script>

Open in new window

0
 
LVL 39

Expert Comment

by:abel
ID: 24323851
> Nope, that didn't work either :o/

check out the post of shobinson, he shows in code what I wrote in words. Maybe still a mistake?
0
 

Author Comment

by:ST3VO
ID: 24323869
Nope..that didn't work either
0
 
LVL 39

Expert Comment

by:abel
ID: 24323886
maybe time to show your whole code, or zip it and upload it? Is it online somewhere for us to see?
0
 

Author Comment

by:ST3VO
ID: 24323932
OK, I'll add the whole code (working on single .js page) - which works.

Please read comments.

See attached code and comments.


//main.js code
 
//this code below I want to cut off and save it on external js file
var text = new Array();
var header = new Array();
var linka = new Array();
var targa = new Array();
var divtext = new Array();
var divh = new Array();
var objst = new Array();
var objs = new Array();
var objsh = new Array();
//this above code would go on external js file.
 
//next code fragment
//I want to place this one on an external .js file too
text[0] = "news 1";
text[1] = "news 2";
text[2] = "news 3";
 
header[0] = "News header 1 :";
header[1] = "News header 2 :";
header[2] = "News header 3 :";
 
linka[0] = "http://www.link1.com/";
linka[1] = "http://www.link2.com/";
linka[2] = "http://www.link3.com/";
 
targa[0] = "_blank";
targa[1] = "_blank";
targa[2] = "_blank"; 
 
//so the above whole go in an external .js file too.
 
//now the rest of the main.js code which will stay here.
uagent = window.navigator.userAgent.toLowerCase();IEB=(uagent.indexOf('msie') != -1)?true:false;var scompat = document.compatMode;var kalan=0;var vcurr=0;var vnext=0;var str2='';var mc=0;mc=text.length;stepc=parseInt(20*(4000/1000));dif=0.00;op=1.00;dif=(1.00/stepc);var RealTickerWidth=0;var RealTickerHeight=0;var CalcIcWidth=0;var CalcIcHeight=0;var nstheight=0,nst2width=0;nstheight=22-1-1;nst2width=500-1-1;var icwidth=500;var icheight=22;var msgw,msgh;msgw=500-120;if((IEB==true)&&(scompat == "BackCompat" )){    RealTickerWidth=500;    RealTickerHeight=22;}else{    RealTickerWidth=500-2*(1);    RealTickerHeight=22-2*(1);}    CalcIcWidth=500-2*(1);    CalcIcHeight=22-2*(1);    str2='';        str2=str2+'<div style="position:relative;width'+RealTickerWidth+':px;height:'+RealTickerHeight+'px;left:0px;top:0px;overflow:hidden;visibility:visible;'+'border-style:solid; border-width:1px; border-color:#000000;'+'">';        for(i=0;i<mc;i++)    {        divh[i]='<div id="dh'+i+'" style="position:absolute;width:'+120+'px; height:'+CalcIcHeight+'px;visibility:inherit;background:'+'#990000'+'; COLOR:#E9E9E9;padding-top:'+3+'px;padding-left:'+0+'px;'+'left:0px; top:0; FONT-FAMILY: '+'Verdana'+'; FONT-SIZE: '+9+'pt; font-style: '+'normal'+'; font-weight: '+'bold'+'; TEXT-DECORATION: '+'none'+';margin:0px; overflow:hidden;text-align:'+'center'+';cursor: default;">';        divtext[i]='<div id="d'+i+'" style="position:absolute;width:'+(CalcIcWidth-120-0)+'px;height:'+CalcIcHeight+'px;left:'+120+'px; top:0;visibility:inherit;background:#EEEEEE;COLOR:'+'#060606'+'; '+'padding-top:'+3+'px;padding-left:'+8+'px;'+' FONT-FAMILY: '+'Verdana'+'; FONT-SIZE: '+'8'+'pt; font-style: '+'normal'+'; font-weight: '+'normal'+'; margin:0px; TEXT-DECORATION: '+'none'+'; overflow:hidden;text-align:'+'left'+';cursor: default;" onmouseover="mdivmo('+i+')" onmouseout ="restime('+i+')" onclick="butclick('+i+')">';        str2=str2+'<div id="op'+i+'" style="position:absolute;overflow:hidden;visibility:hidden;left:0px;top:0px;width:'+CalcIcWidth+'px; height:'+CalcIcHeight+'px;border-style:solid;border-width:0px;">';        str2=str2+''+divh[i]+''+header[i]+'</div>'+divtext[i]+''+text[i]+'</div>';        str2=str2+'</div>';    }    str2=str2+'</div>';		function mdivmo(gnum){    if(linka[gnum]!='')    {		objs[gnum].style.color='#B40000';		objs[gnum].style.cursor='pointer';		window.status='Unregistered version. Visit:www.scriptocean.com';	}   }function restime(gnum2){	objs[gnum2].style.color='#060606';	window.status='';    }function butclick(gnum3){}function zindx(){	objst[vnext].style.visibility="visible";	objst[vcurr].style.zIndex=2;	objst[vnext].style.zIndex=3;}function Sonraki(){	vcurr=vnext;	vnext=vnext+1;		if(vnext>=mc)	{		vnext=0;	}}function dotrans(){    if(vnext!=vcurr)    {        if(IEB){spageObj.filters[0].apply();}        objs[vnext].style.color='#060606';        objst[vnext].style.visibility='visible';        objst[vcurr].style.visibility='hidden';        if(IEB){spageObj.filters[0].play();}    }    Sonraki();    setTimeout('dotrans()',3000+4000);}function dotransff(){	op=op-dif;		if(op<(0.00)){op=0.00;}		objst[vcurr].style.opacity = op;	objst[vnext].style.opacity = 1.00-op;	if(op>(0.00))	{		setTimeout('dotransff()',50);	}	else	{		objst[vcurr].style.zIndex=2;		objst[vnext].style.zIndex=3;		Sonraki();	    setTimeout('beftrans()',3000);					}}function beftrans(){	op=1.00;	objst[vcurr].style.visibility="visible";	objst[vnext].style.visibility="visible";		objst[vcurr].style.zIndex=3;	objst[vnext].style.zIndex=2;		objst[vcurr].style.opacity = 1.00;		objst[vnext].style.opacity = 1.00;			dotransff();	}function DoScrollUp(){    kalan=kalan-Math.ceil(kalan/(4000/1000));	objst[vcurr].style.top=""+(kalan-CalcIcHeight)+"px";	objst[vnext].style.top=""+kalan+"px";    if(kalan<=0)    {            Sonraki();        kalan=CalcIcHeight;	    objst[vnext].style.top=""+kalan+"px";        zindx();                 timeo=setTimeout('DoScrollUp()',3000);        }    else    {        setTimeout('DoScrollUp()',50);        }}function DoSlide(){	kalan=kalan-Math.ceil(kalan/(4000/1000));	objst[vcurr].style.left=""+(kalan-CalcIcWidth)+"px";	objst[vnext].style.left=""+kalan+"px";		if(kalan<=0)	{    		Sonraki();		kalan=CalcIcWidth;		objst[vnext].style.left=""+kalan+"px";	        		zindx();                  		timeo=setTimeout('DoSlide()',3000);	}	else	{		setTimeout('DoSlide()',50);    	}}function dofirst(){    var i=0;    for(i=0;i<mc;i++)    {        objs[i]=document.getElementById("d"+i);        objs[i].style.left=""+120+"px";        objs[i].style.top="0px";        objsh[i]=document.getElementById("dh"+i);        objsh[i].style.left="0px";        objsh[i].style.top="0px";        objst[i]=document.getElementById("op"+i);        objst[i].style.left="0px";        objst[i].style.top="0px";        objst[i].style.visibility="hidden";    }    objst[0].style.visibility="visible";            if(2==2)    {            kalan=CalcIcWidth;        vnext=0;        Sonraki();        zindx();        objst[vnext].style.left=""+kalan+"px";                setTimeout('DoSlide()',3000);    }    else if(2==4)    {            kalan=CalcIcHeight;        vnext=0;        Sonraki();        zindx();                setTimeout('DoScrollUp()',3000);    }    else if(2==5)    {		if(IEB){setTimeout('dotrans()',3000);}		else{setTimeout('beftrans()',3000);}    }    else    {        setTimeout('dotrans()',3000);    }}function initte(){    spageObj=document.getElementById('spage');        if(!spageObj)    {        setTimeout('initte()',200);    }    spageObj.innerHTML=str2;    vnext=1;    if(vnext>=mc){vnext=0;}    spageObj.style.left="0px";    spageObj.style.top="0px";    setTimeout('dofirst()',100);    }setTimeout('initte()',100);		       
 
 
//Now the html file code
<html>
<head><title></title></head>
<body topmargin=0 leftmargin=0 rightmargin=0>
<center>
<div style="position:absolute;left:0px;top:0px;width:500px; height:22px;overflow:hidden; margin:0px;"><div id="spage" style="position:absolute;left:0px;top:0px; width:500px; height:22px; background: #EEEEEE;  overflow:hidden; ;"></div>
<script language="javascript" src="main.js"></script>
 
</div>
</center>
</body></html>
 
//So, that's all the code.
// Hope you can help.

Open in new window

0
 
LVL 39

Assisted Solution

by:abel
abel earned 250 total points
ID: 24323998
Here's a working version of the HTML part. The problem was that you used variables in main.js that were defined in external.js. Though that is not considered good practice, it can work. I just made both files external:


<html>
<head><title></title></head>
<body topmargin=0 leftmargin=0 rightmargin=0>
<center>
<div style="position:absolute;left:0px;top:0px;width:500px; height:22px;overflow:hidden; margin:0px;"><div id="spage" style="position:absolute;left:0px;top:0px; width:500px; height:22px; background: #EEEEEE;  overflow:hidden; ;"></div>
<script type="text/javascript">
    function IncludeJavaScript(jsFile)
        {
          document.write('<script type="text/javascript" src="'
            + jsFile + '"></scr' + 'ipt>');
        }
    IncludeJavaScript('external.js');
    IncludeJavaScript('main.js');
</script>
 
</div>
</center>
</body></html>

Open in new window

0
 
LVL 14

Expert Comment

by:shobinsun
ID: 24324036
Hi,

hope this will work for you.
<script type="text/javascript">
function IncludeJavaScript(jsFile)
    {
      document.write('<script type="text/javascript" src="'
        + jsFile + '"></scr' + 'ipt>');
    }
IncludeJavaScript('second.js');
 
//main.js code
 
 
 
//next code fragment
//I want to place this one on an external .js file too
text[0] = "news 1";
text[1] = "news 2";
text[2] = "news 3";
 
header[0] = "News header 1 :";
header[1] = "News header 2 :";
header[2] = "News header 3 :";
 
linka[0] = "http://www.link1.com/";
linka[1] = "http://www.link2.com/";
linka[2] = "http://www.link3.com/";
 
targa[0] = "_blank";
targa[1] = "_blank";
targa[2] = "_blank"; 
 
//so the above whole go in an external .js file too.
 
//now the rest of the main.js code which will stay here.
uagent = window.navigator.userAgent.toLowerCase();IEB=(uagent.indexOf('msie') != -1)?true:false;var scompat = document.compatMode;var kalan=0;var vcurr=0;var vnext=0;var str2='';var mc=0;mc=text.length;stepc=parseInt(20*(4000/1000));dif=0.00;op=1.00;dif=(1.00/stepc);var RealTickerWidth=0;var RealTickerHeight=0;var CalcIcWidth=0;var CalcIcHeight=0;var nstheight=0,nst2width=0;nstheight=22-1-1;nst2width=500-1-1;var icwidth=500;var icheight=22;var msgw,msgh;msgw=500-120;if((IEB==true)&&(scompat == "BackCompat" )){    RealTickerWidth=500;    RealTickerHeight=22;}else{    RealTickerWidth=500-2*(1);    RealTickerHeight=22-2*(1);}    CalcIcWidth=500-2*(1);    CalcIcHeight=22-2*(1);    str2='';        str2=str2+'<div style="position:relative;width'+RealTickerWidth+':px;height:'+RealTickerHeight+'px;left:0px;top:0px;overflow:hidden;visibility:visible;'+'border-style:solid; border-width:1px; border-color:#000000;'+'">';        for(i=0;i<mc;i++)    {        divh[i]='<div id="dh'+i+'" style="position:absolute;width:'+120+'px; height:'+CalcIcHeight+'px;visibility:inherit;background:'+'#990000'+'; COLOR:#E9E9E9;padding-top:'+3+'px;padding-left:'+0+'px;'+'left:0px; top:0; FONT-FAMILY: '+'Verdana'+'; FONT-SIZE: '+9+'pt; font-style: '+'normal'+'; font-weight: '+'bold'+'; TEXT-DECORATION: '+'none'+';margin:0px; overflow:hidden;text-align:'+'center'+';cursor: default;">';        divtext[i]='<div id="d'+i+'" style="position:absolute;width:'+(CalcIcWidth-120-0)+'px;height:'+CalcIcHeight+'px;left:'+120+'px; top:0;visibility:inherit;background:#EEEEEE;COLOR:'+'#060606'+'; '+'padding-top:'+3+'px;padding-left:'+8+'px;'+' FONT-FAMILY: '+'Verdana'+'; FONT-SIZE: '+'8'+'pt; font-style: '+'normal'+'; font-weight: '+'normal'+'; margin:0px; TEXT-DECORATION: '+'none'+'; overflow:hidden;text-align:'+'left'+';cursor: default;" onmouseover="mdivmo('+i+')" onmouseout ="restime('+i+')" onclick="butclick('+i+')">';        str2=str2+'<div id="op'+i+'" style="position:absolute;overflow:hidden;visibility:hidden;left:0px;top:0px;width:'+CalcIcWidth+'px; height:'+CalcIcHeight+'px;border-style:solid;border-width:0px;">';        str2=str2+''+divh[i]+''+header[i]+'</div>'+divtext[i]+''+text[i]+'</div>';        str2=str2+'</div>';    }    str2=str2+'</div>';               function mdivmo(gnum){    if(linka[gnum]!='')    {              objs[gnum].style.color='#B40000';               objs[gnum].style.cursor='pointer';              window.status='Unregistered version. Visit:www.scriptocean.com';        }   }function restime(gnum2){   objs[gnum2].style.color='#060606';      window.status='';    }function butclick(gnum3){}function zindx(){       objst[vnext].style.visibility="visible";        objst[vcurr].style.zIndex=2;    objst[vnext].style.zIndex=3;}function Sonraki(){        vcurr=vnext;    vnext=vnext+1;          if(vnext>=mc)   {               vnext=0;        }}function dotrans(){    if(vnext!=vcurr)    {        if(IEB){spageObj.filters[0].apply();}        objs[vnext].style.color='#060606';        objst[vnext].style.visibility='visible';        objst[vcurr].style.visibility='hidden';        if(IEB){spageObj.filters[0].play();}    }    Sonraki();    setTimeout('dotrans()',3000+4000);}function dotransff(){ op=op-dif;              if(op<(0.00)){op=0.00;}         objst[vcurr].style.opacity = op;        objst[vnext].style.opacity = 1.00-op;   if(op>(0.00))   {               setTimeout('dotransff()',50);   }       else    {               objst[vcurr].style.zIndex=2;            objst[vnext].style.zIndex=3;            Sonraki();          setTimeout('beftrans()',3000);                                      }}function beftrans(){  op=1.00;        objst[vcurr].style.visibility="visible";        objst[vnext].style.visibility="visible";                objst[vcurr].style.zIndex=3;    objst[vnext].style.zIndex=2;            objst[vcurr].style.opacity = 1.00;              objst[vnext].style.opacity = 1.00;                      dotransff();    }function DoScrollUp(){    kalan=kalan-Math.ceil(kalan/(4000/1000));    objst[vcurr].style.top=""+(kalan-CalcIcHeight)+"px";    objst[vnext].style.top=""+kalan+"px";    if(kalan<=0)    {            Sonraki();        kalan=CalcIcHeight;         objst[vnext].style.top=""+kalan+"px";        zindx();                 timeo=setTimeout('DoScrollUp()',3000);        }    else    {        setTimeout('DoScrollUp()',50);        }}function DoSlide(){       kalan=kalan-Math.ceil(kalan/(4000/1000));       objst[vcurr].style.left=""+(kalan-CalcIcWidth)+"px";    objst[vnext].style.left=""+kalan+"px";          if(kalan<=0)    {               Sonraki();              kalan=CalcIcWidth;              objst[vnext].style.left=""+kalan+"px";                          zindx();                                timeo=setTimeout('DoSlide()',3000);     }       else    {               setTimeout('DoSlide()',50);     }}function dofirst(){    var i=0;    for(i=0;i<mc;i++)    {        objs[i]=document.getElementById("d"+i);        objs[i].style.left=""+120+"px";        objs[i].style.top="0px";        objsh[i]=document.getElementById("dh"+i);        objsh[i].style.left="0px";        objsh[i].style.top="0px";        objst[i]=document.getElementById("op"+i);        objst[i].style.left="0px";        objst[i].style.top="0px";        objst[i].style.visibility="hidden";    }    objst[0].style.visibility="visible";            if(2==2)    {            kalan=CalcIcWidth;        vnext=0;        Sonraki();        zindx();        objst[vnext].style.left=""+kalan+"px";                setTimeout('DoSlide()',3000);    }    else if(2==4)    {            kalan=CalcIcHeight;        vnext=0;        Sonraki();        zindx();                setTimeout('DoScrollUp()',3000);    }    else if(2==5)    {            if(IEB){setTimeout('dotrans()',3000);}          else{setTimeout('beftrans()',3000);}    }    else    {        setTimeout('dotrans()',3000);    }}function initte(){    spageObj=document.getElementById('spage');        if(!spageObj)    {        setTimeout('initte()',200);    }    spageObj.innerHTML=str2;    vnext=1;    if(vnext>=mc){vnext=0;}    spageObj.style.left="0px";    spageObj.style.top="0px";    setTimeout('dofirst()',100);    }setTimeout('initte()',100);                      
 
 </script>
//Now the html file code
<html>
<head><title></title></head>
<body topmargin=0 leftmargin=0 rightmargin=0>
<center>
<div style="position:absolute;left:0px;top:0px;width:500px; height:22px;overflow:hidden; margin:0px;"><div id="spage" style="position:absolute;left:0px;top:0px; width:500px; height:22px; background: #EEEEEE;  overflow:hidden; ;"></div>
<script language="javascript" src="main.js"></script>
 
</div>
</center>
</body></html>
 
//So, that's all the code.
// Hope you can help.

Open in new window

0
 
LVL 39

Expert Comment

by:abel
ID: 24324041
> Here's a working version of the HTML part.
PS: nice animation ;-)
0
 

Author Closing Comment

by:ST3VO
ID: 31578913
Thanks both for your help. Hope I've been fair with the points.
0
 
LVL 39

Expert Comment

by:abel
ID: 24324144
you're welcome, glad we could help :)
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question