Solved

Include external js from a js file

Posted on 2009-05-07
17
1,640 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
 

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now