Connecting Tech Pros Worldwide Forums | Help | Site Map

Loading an external.JS script from within the script Tag (Can itbe dun)???

CES
Guest
 
Posts: n/a
#1: Nov 23 '05
All,
I was wondering if their is a way of loading an external script fill from within a script??

<script language="javascript" type="text/javascript">
function test(var){
<script language="javascript" src="../scripts/base.js" type="text/javascript" />
}
</script>

Obviously this would cause n error but this would give you an idea of what I'm looking to do. I know I can do this with a simple include but...

Sorry about the stupid question... Thanks in advance. - CES

Randy Webb
Guest
 
Posts: n/a
#2: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


CES said the following on 11/20/2005 6:12 PM:[color=blue]
> All,
> I was wondering if their is a way of loading an external script fill
> from within a script??[/color]

Yes, and the benefit is that it is more widely supported than an
HTTPRequest Object is.
[color=blue]
> <script language="javascript" type="text/javascript">[/color]

Skip the language attribute. It's irrelevant, redundant and deprecated
in HTML.
[color=blue]
> function test(var){
> <script language="javascript" src="../scripts/base.js"
> type="text/javascript" />
> }[/color]

Why is var passed into the function if you don't use it? But, var is
probably the worst variable name to use.
[color=blue]
> </script>
> Obviously this would cause n error but this would give you an idea of
> what I'm looking to do. I know I can do this with a simple include but...[/color]

Looks like you want to dynamically load a .js file depending on a
variable without reloading the page.

<URL:
http://groups.google.com/group/comp....scoring%3Dd%26[color=blue]
>[/color]

Or, a tinyURL:

<URL: http://tinyurl.com/a8kte >

Is a thread where I explained, and got feedback, on how to do what you
are describing.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
CES
Guest
 
Posts: n/a
#3: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


Randy Webb wrote:[color=blue]
> CES said the following on 11/20/2005 6:12 PM:[color=green]
>> All,
>> I was wondering if their is a way of loading an external script fill
>> from within a script??[/color]
>
> Yes, and the benefit is that it is more widely supported than an
> HTTPRequest Object is.
>[color=green]
>> <script language="javascript" type="text/javascript">[/color]
>
> Skip the language attribute. It's irrelevant, redundant and deprecated
> in HTML.
>[color=green]
>> function test(var){
>> <script language="javascript" src="../scripts/base.js"
>> type="text/javascript" />
>> }[/color]
>
> Why is var passed into the function if you don't use it? But, var is
> probably the worst variable name to use.
>[color=green]
>> </script>
>> Obviously this would cause n error but this would give you an idea of
>> what I'm looking to do. I know I can do this with a simple include but...[/color]
>
> Looks like you want to dynamically load a .js file depending on a
> variable without reloading the page.
>
> <URL:
> http://groups.google.com/group/comp....scoring%3Dd%26[color=green]
> >[/color]
>
> Or, a tinyURL:
>
> <URL: http://tinyurl.com/a8kte >
>
> Is a thread where I explained, and got feedback, on how to do what you
> are describing.
>[/color]

Randy,

Sorry for the stupidity... unfortunately you responded before I had a chance to retract the post... This is what I'm trying to do from within an external .js file:

--------external file base.js (File Size is 17kb)-------
var loadGoogleScript = document.createElement('script');
loadGoogleScript.type = "text/javascript";
loadGoogleScript.src = "http://www.google-analytics.com/urchin.js";

-------- HTML that calls the base.js -----------------
<head>
<script src="../scripts/base.js" type="text/javascript" />
</head>


This seems to load properly in IE but I've seen some posts that indicate this might not work in FireFox any Suggestions?
Also I know the external file loads asynchronously... is their a way of testing if the script has loaded before I call a function from within the script??

CES

CES
Guest
 
Posts: n/a
#4: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


Randy Webb wrote:[color=blue]
> CES said the following on 11/20/2005 6:12 PM:[color=green]
>> All,
>> I was wondering if their is a way of loading an external script fill
>> from within a script??[/color]
>
> Yes, and the benefit is that it is more widely supported than an
> HTTPRequest Object is.
>[color=green]
>> <script language="javascript" type="text/javascript">[/color]
>
> Skip the language attribute. It's irrelevant, redundant and deprecated
> in HTML.
>[color=green]
>> function test(var){
>> <script language="javascript" src="../scripts/base.js"
>> type="text/javascript" />
>> }[/color]
>
> Why is var passed into the function if you don't use it? But, var is
> probably the worst variable name to use.
>[color=green]
>> </script>
>> Obviously this would cause n error but this would give you an idea of
>> what I'm looking to do. I know I can do this with a simple include but...[/color]
>
> Looks like you want to dynamically load a .js file depending on a
> variable without reloading the page.
>
> <URL:
> http://groups.google.com/group/comp....scoring%3Dd%26[color=green]
> >[/color]
>
> Or, a tinyURL:
>
> <URL: http://tinyurl.com/a8kte >
>
> Is a thread where I explained, and got feedback, on how to do what you
> are describing.
>[/color]

Sorry... I forgot to ad the appendChild to the script above:

--------external file base.js -------
var loadGoogleScript = document.createElement('script');
loadGoogleScript.type = "text/javascript";
loadGoogleScript.src = "http://www.google-analytics.com/urchin.js";
document.getElementsByTagName('head')[0].appendChild(loadGoogleScript);

And just to elevate any confusion the urchin.js file size is 17kb, not the base.js

If anyone could anser the two questions above I wold be greatfull - CES
RobG
Guest
 
Posts: n/a
#5: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


Randy Webb wrote:
[...][color=blue]
> Looks like you want to dynamically load a .js file depending on a
> variable without reloading the page.
>
> <URL:
> http://groups.google.com/group/comp....scoring%3Dd%26[color=green]
> >[/color]
>
> Or, a tinyURL:
>
> <URL: http://tinyurl.com/a8kte >
>
> Is a thread where I explained, and got feedback, on how to do what you
> are describing.
>[/color]

Randy,

Further to CES's question, I asked a similar question previously
regarding dynamic loading of scripts. This seems to be a favourite of
yours, I was wondering if you can answer it:

<URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/dbe0590360ce7588/0d99f2f0e7dc8dcd?q=greasemonkey&rnum=1#0d99f2f0e7d c8dcd>

In Firefox, dynamic scripts run but the content is not accessible to the
script that loaded it. setTimeout() can be used to break the nexus but
that seems like a real kludge.

Any hints? Is this a Firefox bug?

A simple test case is below. In Firefox, clicking 'load & call' firstly
prints the error message, then the one from test.js. Subsequent clicks
also print the message from the in-page script before the one from the
loaded script.

IE works as expected - the message from the loaded script appears first,
then the one from the function (with no errors).

The 'load & setTimeout' button works as I would expect the first to work
in Firefox (though setting the lag to 0ms usually causes a 'showText is
undefined' error).

The third button is just to test whether showText is currently defined
or not.


<script type="text/javascript">

function addCall(txt){
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = 'test.js';
document.getElementsByTagName('head')[0].appendChild(oScript);
try {
showText(txt);
} catch(e) {
document.getElementById('msg').innerHTML +=
'showText failed...<br>';
}
}

function addTimeout(txt){
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = 'test.js';
document.getElementsByTagName('head')[0].appendChild(oScript);
setTimeout('showText(\''+txt+'\')', 50);
}

</script>

<input type="button" value="load & call"
onclick="addCall('from ' + this.value);">
<br>
<input type="button" value="load & setTimeout"
onclick="addTimeout('from ' + this.value);">
<br>
<input type="button" value="typeof showText"
onclick="alert('typeof showText: ' + typeof showText);">

<div id="msg"></div>


/***********
test.js is:
***********/

function showText(txt)
{
document.getElementById('msg').innerHTML += txt + '<br>';
}

showText('hi from test.js');




--
Rob
Randy Webb
Guest
 
Posts: n/a
#6: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


RobG said the following on 11/20/2005 8:28 PM:[color=blue]
> Randy Webb wrote:
> [...]
>[color=green]
>> Looks like you want to dynamically load a .js file depending on a
>> variable without reloading the page.
>>
>> <URL:
>> http://groups.google.com/group/comp....scoring%3Dd%26[color=darkred]
>> >[/color]
>>
>> Or, a tinyURL:
>>
>> <URL: http://tinyurl.com/a8kte >
>>
>> Is a thread where I explained, and got feedback, on how to do what you
>> are describing.
>>[/color]
>
> Randy,
>
> Further to CES's question, I asked a similar question previously
> regarding dynamic loading of scripts. This seems to be a favourite of
> yours, I was wondering if you can answer it:
>
> <URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/dbe0590360ce7588/0d99f2f0e7dc8dcd?q=greasemonkey&rnum=1#0d99f2f0e7d c8dcd>
>
>
> In Firefox, dynamic scripts run but the content is not accessible to the
> script that loaded it. setTimeout() can be used to break the nexus but
> that seems like a real kludge.
>
> Any hints? Is this a Firefox bug?[/color]

I think it's more an implementation difference than a bug. It seems to
fall in the same category with the "attempting to update the display
while trying to execute a function" scenario where the browser won't
update the display until the function exits. In this case, Firefox isn't
updating(loading) the external file until the current function exits.
I think, but not sure, that the setTimeout (even at 0ms) is exiting the
function and putting the second function call in a second stack of
function calls rather than in the initial order.
[color=blue]
> A simple test case is below. In Firefox, clicking 'load & call' firstly
> prints the error message, then the one from test.js. Subsequent clicks
> also print the message from the in-page script before the one from the
> loaded script.
>
> IE works as expected - the message from the loaded script appears first,
> then the one from the function (with no errors).
> The 'load & setTimeout' button works as I would expect the first to work
> in Firefox (though setting the lag to 0ms usually causes a 'showText is
> undefined' error).[/color]

That would indicate what I thought to begin with. That the setTimeout is
allowing Firefox to update the script block before attempting to execute
the function.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Randy Webb
Guest
 
Posts: n/a
#7: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


CES said the following on 11/20/2005 7:23 PM:[color=blue]
> Randy Webb wrote:
>[color=green]
>> CES said the following on 11/20/2005 6:12 PM:
>>[color=darkred]
>>> All,
>>> I was wondering if their is a way of loading an external script fill
>>> from within a script??[/color]
>>
>>
>> Yes, and the benefit is that it is more widely supported than an
>> HTTPRequest Object is.[/color][/color]

Answer to Question One ^^^^^^^^^
[color=blue][color=green]
>>[color=darkred]
>>> function test(var){
>>> <script language="javascript" src="../scripts/base.js"
>>> type="text/javascript" />
>>> }[/color]
>>
>>
>> Why is var passed into the function if you don't use it? But, var is
>> probably the worst variable name to use.
>>[color=darkred]
>>> </script>
>>> Obviously this would cause n error but this would give you an idea of
>>> what I'm looking to do. I know I can do this with a simple include
>>> but...[/color]
>>
>>
>> Looks like you want to dynamically load a .js file depending on a
>> variable without reloading the page.
>>
>> <URL:
>> http://groups.google.com/group/comp....scoring%3Dd%26[color=darkred]
>> >[/color]
>>
>> Or, a tinyURL:
>>
>> <URL: http://tinyurl.com/a8kte >
>>
>> Is a thread where I explained, and got feedback, on how to do what you
>> are describing.
>>[/color]
>
> Sorry... I forgot to ad the appendChild to the script above:
>
> --------external file base.js -------
> var loadGoogleScript = document.createElement('script');
> loadGoogleScript.type = "text/javascript";
> loadGoogleScript.src = "http://www.google-analytics.com/urchin.js";
> document.getElementsByTagName('head')[0].appendChild(loadGoogleScript);
>
> And just to elevate any confusion the urchin.js file size is 17kb, not
> the base.js
>
> If anyone could anser the two questions above I wold be greatfull - CES[/color]

I answered the first one. Yes, you can dynamically load a js file from
script. In your case, you have the code and it does what you want it to
do. I am not sure why you are doing all that instead of a simple
<script src="someFile.js" type="text/javascript"></script>
construct though. Unless it is for academic reasons. Or, you want to
modify it and make it function-alized:

function loadJSFile(fileURL){
var loadGoogleScript = document.createElement('script');
loadGoogleScript.type = "text/javascript";
loadGoogleScript.src = fileURL;
document.getElementsByTagName('head')[0].appendChild(loadGoogleScript);
}

and then call it like this:

loadJSFile('http://www.google-analytics.com/urchin.js');

That is without the necessary feature detection since not all browsers
support gEBTN and appendChild.

As for knowing when the file is loaded, I doubt it very seriously unless
you loaded it from your own server, added some type of marker at the end
of the file, then retrieved it from there.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jasen Betts
Guest
 
Posts: n/a
#8: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


On 2005-11-20, CES <none@none.com> wrote:

[color=blue]
> Sorry for the stupidity... unfortunately you responded before I had a chance to retract the post... This is what I'm trying to do from within an external .js file:
>
> --------external file base.js (File Size is 17kb)-------
> var loadGoogleScript = document.createElement('script');
> loadGoogleScript.type = "text/javascript";
> loadGoogleScript.src = "http://www.google-analytics.com/urchin.js";
>
> -------- HTML that calls the base.js -----------------
><head>
> <script src="../scripts/base.js" type="text/javascript" />
></head>
>
>
> This seems to load properly in IE but I've seen some posts that indicate
> this might not work in FireFox any Suggestions?
> Also I know the external file loads asynchronously...
> is their a way of testing if the script has loaded before I call a function from within the script??[/color]

maybe you could use onload or if(function_name)

--

Bye.
Jasen
Spats30
Guest
 
Posts: n/a
#9: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


Here's what works in every browser. You just need to break up the
<script> tag within your script, and then drop in the variable:

<script language="javascript" type="text/javascript">
function test(varScript){
document.write('<scr'+'ipt language="javascript"
type="text/javascript" src="/mypath/js/' + varScript +
'"></scr'+'ipt>');
}

//function call
test(myFile.js)
</script>


Enjoy!

VK
Guest
 
Posts: n/a
#10: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???



Spats30 wrote:[color=blue]
> You just need to break up the <script> tag within your script[/color]

I always did that since NN 3.0 by I never managed to find any official
explanation why the oposite way may lead to a failure. I know it may,
but I'm still cloudy why. Do you have some info about it?

Michael Winter
Guest
 
Posts: n/a
#11: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


On 21/11/2005 20:18, Spats30 wrote:
[color=blue]
> <script language="javascript" type="text/javascript">[/color]

The language attribute has long been deprecated and is superfluous
above. Omit it.
[color=blue]
> function test(varScript){
> document.write('<scr'+'ipt language="javascript"
> type="text/javascript" src="/mypath/js/' + varScript +
> '"></scr'+'ipt>');
> }[/color]

You managed to miss the important point.

The browser is looking to terminate the SCRIPT element. All it
technically needs to find is an ETAGO token (</) followed by a name
start character, so it is the former that needs to be split:

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

In practice, browsers look for the complete closing tag, but the example
above takes care of both without the need for concatenation (used here
only to avoid wrapping).

See Appendix B.3.2[1] in the HTML 4.01 Specification.

Mike


Please manually wrap code before posting.

[1] <http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.2>

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Randy Webb
Guest
 
Posts: n/a
#12: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


Spats30 said the following on 11/21/2005 3:18 PM:[color=blue]
> Here's what works in every browser. You just need to break up the
> <script> tag within your script, and then drop in the variable:[/color]

It is not the script tag you need to break up, it is the closing tag,
and more specifically it is the sequence </ that needs to be broken up.

'<\/script>'

Any other advice is unmitigated garbage with regards to that.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Randy Webb
Guest
 
Posts: n/a
#13: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


VK said the following on 11/21/2005 3:49 PM:[color=blue]
> Spats30 wrote:
>[color=green]
>>You just need to break up the <script> tag within your script[/color]
>
>
> I always did that since NN 3.0 by I never managed to find any official
> explanation why the oposite way may lead to a failure. I know it may,
> but I'm still cloudy why. Do you have some info about it?[/color]

Read Michaels reply and it explains it. It is not the <script tag that
has to be broken up, it is the closing script tag. When the opening
script tag is encountered, the browser looks for the closing script tag
and if you do not have it broken up, then the UA *may* decide to end the
script block there and throw errors.

The simplest way is to escape the / in the closing script tag:

<\/script>
instead of:
</script>

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
VK
Guest
 
Posts: n/a
#14: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???



Randy Webb wrote:[color=blue]
> Read Michaels reply and it explains it. It is not the <script tag that
> has to be broken up, it is the closing script tag. When the opening
> script tag is encountered, the browser looks for the closing script tag
> and if you do not have it broken up, then the UA *may* decide to end the
> script block there and throw errors.
>
> The simplest way is to escape the / in the closing script tag:
>
> <\/script>
> instead of:
> </script>[/color]

I prefer "</scr"+"ipt>" :-)

Still a bit cryptic, because document.write() method is (?) an
equivalent of standard input stream. But browser doesn't bother if it
gets "<script>Script beginning" from the server first, and later
"Script end</script>".
?

Randy Webb
Guest
 
Posts: n/a
#15: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


VK said the following on 11/21/2005 7:07 PM:[color=blue]
> Randy Webb wrote:
>[color=green]
>>Read Michaels reply and it explains it. It is not the <script tag that
>>has to be broken up, it is the closing script tag. When the opening
>>script tag is encountered, the browser looks for the closing script tag
>>and if you do not have it broken up, then the UA *may* decide to end the
>>script block there and throw errors.
>>
>>The simplest way is to escape the / in the closing script tag:
>>
>><\/script>
>>instead of:
>></script>[/color]
>
>
> I prefer "</scr"+"ipt>" :-)[/color]

That is your choice. It doesn't do what it is intended to do but it is
your choice. The UA is not hunting "</script>", it is hunting (or
supposed to) the combination of </ and an alpha character to end the
script block. When it encounters your </s it has every right to end the
script block. When you escape the / it breaks that sequence so the
browser doesn't see the combination </alpha

It is all purely academic though as I don't know of a browser that is
under 8-10 years old that doesn't handle it.
[color=blue]
> Still a bit cryptic, because document.write() method is (?) an
> equivalent of standard input stream. But browser doesn't bother if it
> gets "<script>Script beginning" from the server first, and later
> "Script end</script>".
> ?[/color]

Again, its not </script> its hunting, it is simply </ followed by an
alpha character. Then, it has every right (if it chooses to do so) to
end the script block.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Thomas 'PointedEars' Lahn
Guest
 
Posts: n/a
#16: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


VK wrote:
[color=blue]
> Randy Webb wrote:[color=green]
>> The simplest way is to escape the / in the closing script tag:
>>
>> <\/script>
>> instead of:
>> </script>[/color]
>
> I prefer "</scr"+"ipt>" :-)[/color]

This will result in both syntactically incorrect script code as well as
invalid HTML since the ETAGO (`</') delimiter indicates the end of the
`script' element's CDATA content. <URL:http://validator.w3.org/>


PointedEars
Jasen Betts
Guest
 
Posts: n/a
#17: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


On 2005-11-21, Spats30 <hoff_j@yahoo.com> wrote:[color=blue]
> Here's what works in every browser. You just need to break up the
><script> tag within your script, and then drop in the variable:
>
> <script language="javascript" type="text/javascript">
> function test(varScript){
> document.write('<scr'+'ipt language="javascript"
> type="text/javascript" src="/mypath/js/' + varScript +
> '"></scr'+'ipt>');
> }
>
> //function call
> test(myFile.js)
> </script>[/color]

have you got a version that can be used after the page has loaded?


Bye.
Jasen
Randy Webb
Guest
 
Posts: n/a
#18: Nov 23 '05

re: Loading an external.JS script from within the script Tag (Can itbe dun)???


Jasen Betts said the following on 11/23/2005 12:19 AM:[color=blue]
> On 2005-11-21, Spats30 <hoff_j@yahoo.com> wrote:
>[color=green]
>>Here's what works in every browser. You just need to break up the
>><script> tag within your script, and then drop in the variable:
>>
>> <script language="javascript" type="text/javascript">
>> function test(varScript){
>> document.write('<scr'+'ipt language="javascript"
>>type="text/javascript" src="/mypath/js/' + varScript +
>>'"></scr'+'ipt>');
>> }
>>
>> //function call
>> test(myFile.js)
>> </script>[/color]
>
>
> have you got a version that can be used after the page has loaded?[/color]

I do, I doubt VK does. The above is not even a good solution when the
page is loading.

This is a function I posted, in this thread no less, that can be used
after the page is loaded:

function loadJSFile(fileURL){
var loadGoogleScript = document.createElement('script');
loadGoogleScript.type = "text/javascript";
loadGoogleScript.src = fileURL;
document.getElementsByTagName('head')[0].appendChild(loadGoogleScript);
}

and then call it like this:

loadJSFile('http://www.google-analytics.com/urchin.js');

It needs some more feature detection to make it web-safe but the idea is
there.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Closed Thread


Similar JavaScript / Ajax / DHTML bytes