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

CES

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

Nov 23 '05 #1

Follow Post Reply

2586

Randy Webb

CES said the following on 11/20/2005 6:12 PM:

All,
I was wondering if their is a way of loading an external script fill
from within a script??
Yes, and the benefit is that it is more widely supported than an
HTTPRequest Object is.
<script language="javascript" type="text/javascript">
Skip the language attribute. It's irrelevant, redundant and deprecated
in HTML.
function test(var){
<script language="javascript" src="../scripts/base.js"
type="text/javascript" />
}
Why is var passed into the function if you don't use it? But, var is
probably the worst variable name to use.
</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...
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

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/

Nov 23 '05 #2

CES

Randy Webb wrote:

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

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

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

Why is var passed into the function if you don't use it? But, var is
probably the worst variable name to use.
</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...

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
>

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,

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

Nov 23 '05 #3

CES

Randy Webb wrote:

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

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

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

Why is var passed into the function if you don't use it? But, var is
probably the worst variable name to use.
</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...

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
>

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.

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

Nov 23 '05 #4

RobG

Randy Webb wrote:
[...]

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
>

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,

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

Nov 23 '05 #5

Randy Webb

RobG said the following on 11/20/2005 8:28 PM:

Randy Webb wrote:
[...]
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
>
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,

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?

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.
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).

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/

Nov 23 '05 #6

Randy Webb

CES said the following on 11/20/2005 7:23 PM:

Randy Webb wrote:
CES said the following on 11/20/2005 6:12 PM:
All,
I was wondering if their is a way of loading an external script fill
from within a script??

Yes, and the benefit is that it is more widely supported than an
HTTPRequest Object is.
Answer to Question One ^^^^^^^^^

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

Why is var passed into the function if you don't use it? But, var is
probably the worst variable name to use.
</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...

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
>

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.

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

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/

Nov 23 '05 #7

Jasen Betts

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

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??

maybe you could use onload or if(function_name)

--

Bye.
Jasen

Nov 23 '05 #8

Spats30

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!

Nov 23 '05 #9

Spats30 wrote:

You just need to break up the <script> tag within your script

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?

Nov 23 '05 #10

Michael Winter

On 21/11/2005 20:18, Spats30 wrote:

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

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.

Nov 23 '05 #11

Randy Webb

Spats30 said the following on 11/21/2005 3:18 PM:

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:

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/

Nov 23 '05 #12

Randy Webb

VK said the following on 11/21/2005 3:49 PM:

Spats30 wrote:
You just need to break up the <script> tag within your script

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?

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/

Nov 23 '05 #13

Randy Webb wrote:

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>

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>".
?

Nov 23 '05 #14

Randy Webb

VK said the following on 11/21/2005 7:07 PM:

Randy Webb wrote:
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>

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

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.
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>".
?

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/

Nov 23 '05 #15

Thomas 'PointedEars' Lahn

VK wrote:

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

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

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

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

Nov 23 '05 #16

Jasen Betts

On 2005-11-21, Spats30 <ho****@yahoo.com> wrote:

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>

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

Nov 23 '05 #17

Randy Webb

Jasen Betts said the following on 11/23/2005 12:19 AM:

On 2005-11-21, Spats30 <ho****@yahoo.com> wrote:
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>

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

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/

Nov 23 '05 #18

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

This discussion thread is closed

Similar topics