Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

add javascript on the fly

5 views
Skip to first unread message

ojvm

unread,
Mar 12, 2007, 3:20:07 PM3/12/07
to
Hi every body. as my post says, i want to add javascript to my page on
the fly. for example

page1.html

<html>
<head>
<script type='text/javascript'src='controlador.js'></script>

<title>...</title>
</head>
<body>
.....
</body>
</html>

now when the page has been loaded, acording some user's actions, i'd
like to add a new script, like this.

page1.html

<html>
<head>
<script type='text/javascript'src='controlador.js'></script>
<script type='text/javascript'src='new-file-just-added.js'></script>

<title>...</title>
</head>
<body>
.....
</body>
</html>

right now i'm doing this.

document.write("<script type='text/javascript'src='new-file-just-
added.js''></script>");

obviusly this is not working properly, because, i think, in that way
all the content is erased.

hope you can helpme. thanks

Bart Van der Donck

unread,
Mar 12, 2007, 4:22:20 PM3/12/07
to
ojvm wrote:

> now when the page has been loaded, acording some user's
> actions, i'd like to add a new script,

[...]

> right now i'm doing this.
>
> document.write("<script type='text/javascript'

> src='new-file-just-added.js''></script>");


>
> obviusly this is not working properly, because, i think,
> in that way all the content is erased.
>
> hope you can helpme. thanks

var sc = document.createElement('script')
sc.type = 'text/javascript'
sc.src = 'new-file-just-added.js'
document.getElementsByTagName('head')[0].appendChild(sc)

Before accessing the content of of file.js, you should first make sure
that it's fully loaded.

http://groups.google.com/group/comp.lang.javascript/msg/497fc1b1393136b9

Hope this helps,

--
Bart

RobG

unread,
Mar 12, 2007, 4:30:24 PM3/12/07
to
On Mar 13, 5:20 am, "ojvm" <yomerosoy2005-foros...@yahoo.com> wrote:
> Hi every body. as my post says, i want to add javascript to my page on
> the fly. for example

<FAQENTRY>

This question seems to have been asked about once a week for the past
year - time for an FAQ entry?

</FAQENTRY>

--
Rob

Ivan Marsh

unread,
Mar 12, 2007, 6:42:02 PM3/12/07
to
On Mon, 12 Mar 2007 12:20:07 -0700, ojvm wrote:

> Hi every body. as my post says, i want to add javascript to my page on
> the fly. for example

Server-side includes happen at the time the page is downloaded... so, you
can't do that.

Look into AJAX.

Randy Webb

unread,
Mar 12, 2007, 7:24:55 PM3/12/07
to
RobG said the following on 3/12/2007 4:30 PM:

> On Mar 13, 5:20 am, "ojvm" <yomerosoy2005-foros...@yahoo.com> wrote:
>> Hi every body. as my post says, i want to add javascript to my page on
>> the fly. for example
>
> <F******Y>

>
> This question seems to have been asked about once a week for the past
> year - time for an FAQ entry?
>
> </F******Y>

And people called me, ummm, what was it, eh, ahh yes, a "true
humanitarian" (Peter Michaux) in the createTextNode and IE7 thread that
I think has become more referred to in the last 6 months than any other
thread in the archives:

<URL:
http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/7e23f42490c301de/56d47ba8d4d73e30?lnk=gst&q=createtextnode+IE7&rnum=1#56d47ba8d4d73e30>

If an entry is made, it should also cover the AJAX side of it where it
more of a "How do I get my inserted scripts to execute?" Or, should it
be two different entries?

Question:
How do I dynamically load a script block?

Answer:
Ummmm.... :-)

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Randy Webb

unread,
Mar 12, 2007, 7:25:51 PM3/12/07
to
Ivan Marsh said the following on 3/12/2007 6:42 PM:

> On Mon, 12 Mar 2007 12:20:07 -0700, ojvm wrote:
>
>> Hi every body. as my post says, i want to add javascript to my page on
>> the fly. for example
>
> Server-side includes happen at the time the page is downloaded...

Who said anything about Server-side includes?

> so, you can't do that.

I bet I can :)

> Look into AJAX.

AJAX is the *worst* way to try to dynamically load a .js file on the fly.

Richard Cornford

unread,
Mar 12, 2007, 8:35:42 PM3/12/07
to
Randy Webb wrote:
<snip>

> Question:
> How do I dynamically load a script block?
<snip>

It might be better if the question was along the lines of "How can a
script element/file be dynamically loaded into an already loaded web
page" so that the whole question of using - document.wirte - can be
excluded from the answer (to keep it simple enough for a quick answer
(and preclude some of the quibbling up front).

Richard.

Bart Van der Donck

unread,
Mar 13, 2007, 4:49:23 AM3/13/07
to
Randy Webb wrote:

> [...]


> Question:
> How do I dynamically load a script block?

In 95% of the cases, one should be fine to design the application so
that it always loads the external resource; and then decide to
(whether or not) execute code function-wise. Objections regarding
memory use are likely to sprout from the remaining 5%.

--
Bart

Ivan Marsh

unread,
Mar 13, 2007, 10:17:53 AM3/13/07
to
On Mon, 12 Mar 2007 19:25:51 -0400, Randy Webb wrote:

> Ivan Marsh said the following on 3/12/2007 6:42 PM:
>> On Mon, 12 Mar 2007 12:20:07 -0700, ojvm wrote:
>>
>>> Hi every body. as my post says, i want to add javascript to my page on
>>> the fly. for example
>>
>> Server-side includes happen at the time the page is downloaded...
>
> Who said anything about Server-side includes?

This is the javascript equivalent of a server-side include: <script


type='text/javascript'src='controlador.js'></script>

>> so, you can't do that.


>
> I bet I can :)

Not without reloading the page you can't.



>> Look into AJAX.
>
> AJAX is the *worst* way to try to dynamically load a .js file on the
> fly.

I wasn't suggesting loading a .js file with AJAX... it is a good way to
present asynchronous changes to the page however.

ojvm

unread,
Mar 13, 2007, 11:33:38 AM3/13/07
to
Tank you bart, your solution worked really fine, is exactly what a was
looking for. only as a comment. before i post my question, i looked
for in many places, but i couldn't find any thing.


thanks again.


Bart Van der Donck

unread,
Mar 13, 2007, 11:49:55 AM3/13/07
to
ojvm wrote:

> Tank

Russian? German?

You're welcome.

--
Bart

Randy Webb

unread,
Mar 13, 2007, 12:22:01 PM3/13/07
to
Ivan Marsh said the following on 3/13/2007 10:17 AM:

> On Mon, 12 Mar 2007 19:25:51 -0400, Randy Webb wrote:
>
>> Ivan Marsh said the following on 3/12/2007 6:42 PM:
>>> On Mon, 12 Mar 2007 12:20:07 -0700, ojvm wrote:
>>>
>>>> Hi every body. as my post says, i want to add javascript to my page on
>>>> the fly. for example
>>> Server-side includes happen at the time the page is downloaded...
>> Who said anything about Server-side includes?
>
> This is the javascript equivalent of a server-side include: <script
> type='text/javascript'src='controlador.js'></script>

No it isn't, but ok.

>>> so, you can't do that.
>> I bet I can :)
>
> Not without reloading the page you can't.

Are you a gambling man?

You should search the archives for loadJSFile and my name before
answering that question above. As I know, without a doubt, that I can
load a .js file after the page has loaded *without* reloading the page.

Ivan Marsh

unread,
Mar 13, 2007, 12:34:53 PM3/13/07
to
On Tue, 13 Mar 2007 12:22:01 -0400, Randy Webb wrote:

> Ivan Marsh said the following on 3/13/2007 10:17 AM:
>> On Mon, 12 Mar 2007 19:25:51 -0400, Randy Webb wrote:
>>
>>> Ivan Marsh said the following on 3/12/2007 6:42 PM:
>>>> On Mon, 12 Mar 2007 12:20:07 -0700, ojvm wrote:
>>>>
>>>>> Hi every body. as my post says, i want to add javascript to my page
>>>>> on the fly. for example
>>>> Server-side includes happen at the time the page is downloaded...
>>> Who said anything about Server-side includes?
>>
>> This is the javascript equivalent of a server-side include: <script
>> type='text/javascript'src='controlador.js'></script>
>
> No it isn't, but ok.

Equivalent.



>>>> so, you can't do that.
>>> I bet I can :)
>>
>> Not without reloading the page you can't.
>
> Are you a gambling man?
>
> You should search the archives for loadJSFile and my name before
> answering that question above. As I know, without a doubt, that I can
> load a .js file after the page has loaded *without* reloading the page.

Loading a .js file is nothing.

Do it by dropping a second <script
type='text/javascript'src='controlador.js'></script> line on to the
page... it cannot be done without reloading the page.

Sorry if it was not clear what I was talking about... which was obviously
a not terribly clear explanation as to why the example given wouldn't
work.

Randy Webb

unread,
Mar 13, 2007, 12:39:20 PM3/13/07
to
Ivan Marsh said the following on 3/13/2007 12:34 PM:

> On Tue, 13 Mar 2007 12:22:01 -0400, Randy Webb wrote:
>
>> Ivan Marsh said the following on 3/13/2007 10:17 AM:
>>> On Mon, 12 Mar 2007 19:25:51 -0400, Randy Webb wrote:
>>>
>>>> Ivan Marsh said the following on 3/12/2007 6:42 PM:
>>>>> On Mon, 12 Mar 2007 12:20:07 -0700, ojvm wrote:

<snip>

>>>>> so, you can't do that.
>>>> I bet I can :)
>>> Not without reloading the page you can't.
>> Are you a gambling man?
>>
>> You should search the archives for loadJSFile and my name before
>> answering that question above. As I know, without a doubt, that I can
>> load a .js file after the page has loaded *without* reloading the page.
>
> Loading a .js file is nothing.

After the page has finished loading. Which was the original request.

<quote cite="original post">


now when the page has been loaded, acording some user's actions, i'd
like to add a new script, like this.

</quote>

loadJSFile (in it's many incarnations) does precisely what the OP asked for.


> Do it by dropping a second <script
> type='text/javascript'src='controlador.js'></script> line on to the
> page... it cannot be done without reloading the page.

That doesn't do what was asked though. Although I can do that without
reloading the page. It just won't get executed with a few exceptions.

> Sorry if it was not clear what I was talking about... which was obviously
> a not terribly clear explanation as to why the example given wouldn't
> work.

Yes, we were comparing two different things. I was referring to what the
OP asked about (which is almost trivial to be honest). And I am not sure
what you are referring to, other than trying to add it on a page load,
before the page has finished loading.

Randy Webb

unread,
Mar 13, 2007, 12:42:47 PM3/13/07
to
Bart Van der Donck said the following on 3/13/2007 4:49 AM:

I beg to differ. One of the internal applications I maintain uses .js
files as the data transfer method. The possibilities from the main page
number somewhere around 20,000 .js files (I could login to work and
check but can't right now). Are you suggesting that instead of loading
them on the fly I should load all 20,000 of those .js files when the
page loads? It would take days to open the app.

Dynamically loading .js files is a much better alternative (to date
anyway) than XHR is is the reason I use it internally at work.

Randy Webb

unread,
Mar 13, 2007, 12:43:57 PM3/13/07
to
Richard Cornford said the following on 3/12/2007 8:35 PM:

<proposal>
How can a script element/file be dynamically loaded after the page has
finished loading?
</proposal>

Evertjan.

unread,
Mar 13, 2007, 12:49:07 PM3/13/07
to
Randy Webb wrote on 13 mrt 2007 in comp.lang.javascript:

> <proposal>
> How can a script element/file be dynamically loaded after the page has
> finished loading?
> </proposal>
>

... be loaded and executed ...

Loading with AJAX to be shown as text,
does not seem the point,
and such loading as text and then simple eval()-ing
seems too evil to contemplate.


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Bart Van der Donck

unread,
Mar 13, 2007, 1:16:00 PM3/13/07
to
Randy Webb wrote:

> Bart Van der Donck said the following on 3/13/2007 4:49 AM:
>
> > Randy Webb wrote:
>
> >> [...]
> >> Question:
> >> How do I dynamically load a script block?
>
> > In 95% of the cases, one should be fine to design the application so
> > that it always loads the external resource; and then decide to
> > (whether or not) execute code function-wise. Objections regarding
> > memory use are likely to sprout from the remaining 5%.
>
> I beg to differ. One of the internal applications I maintain uses .js
> files as the data transfer method. The possibilities from the main page
> number somewhere around 20,000 .js files (I could login to work and
> check but can't right now). Are you suggesting that instead of loading
> them on the fly I should load all 20,000 of those .js files when the
> page loads? It would take days to open the app.

You're right of course. This is definitely such a case where one
should load code partially/dynamically.

--
Bart

ojvm

unread,
Mar 13, 2007, 1:39:03 PM3/13/07
to
On 13 mar, 09:49, "Bart Van der Donck" <b...@nijlen.com> wrote:
> ojvm wrote:
> > Tank
>
> Russian? German?

in fact mexican. yes i know, i have a lot of misspellings. thank you
again.


Bart Van der Donck

unread,
Mar 13, 2007, 2:25:17 PM3/13/07
to
ojvm wrote:

> On 13 mar, 09:49, "Bart Van der Donck" <b...@nijlen.com> wrote:
>
> > ojvm wrote:
> > > Tank
>
> > Russian? German?
>
> in fact mexican. yes i know, i have a lot of misspellings.

It looks like my joke of the Russian/German tank didn't make it over
the ocean :)

--
Bart

ASM

unread,
Mar 13, 2007, 2:38:23 PM3/13/07
to
Ivan Marsh a écrit :

> On Mon, 12 Mar 2007 19:25:51 -0400, Randy Webb wrote:
>
>> Ivan Marsh said the following on 3/12/2007 6:42 PM:
>>> On Mon, 12 Mar 2007 12:20:07 -0700, ojvm wrote:
>>>
>>> so, you can't do that.
>> I bet I can :)
>
> Not without reloading the page you can't.

I think you can

<html>
<script type="text/javascript">
function loadJS(file) {
var s = document.createElement('SCRIPT');
s.type = 'text/javascript';
s.src = file;
document.body.appendChild(s);
}
</script>
<a href="#" onclick="loadJS('test.js'); return false;">
say hello
</a>
</html>


file 'test.js' :
alert('hello');


tested with FF 2, Safari 1.3, Opera 9, iCab 3

don't know what that gives with IE ...

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

ASM

unread,
Mar 13, 2007, 2:42:01 PM3/13/07
to
Randy Webb a écrit :

>
> You should search the archives for loadJSFile and my name before
> answering that question above. As I know, without a doubt, that I can
> load a .js file after the page has loaded *without* reloading the page.

If it is what I think,
can you give me back the address of this test page ?
I'm unable to find it.

ASM

unread,
Mar 13, 2007, 2:44:40 PM3/13/07
to
Ivan Marsh a écrit :

>
> Do it by dropping a second <script
> type='text/javascript'src='controlador.js'></script> line on to the
> page... it cannot be done without reloading the page.

with DOM it is possible.

But ... possibly IE can't understand that ?


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Stephane Moriaux and his (less) old Mac already out of date

Randy Webb

unread,
Mar 13, 2007, 7:32:31 PM3/13/07
to
ASM said the following on 3/13/2007 2:38 PM:

It will, without a doubt, give the alert.

Randy Webb

unread,
Mar 13, 2007, 7:33:33 PM3/13/07
to
ASM said the following on 3/13/2007 2:42 PM:

> Randy Webb a écrit :
>>
>> You should search the archives for loadJSFile and my name before
>> answering that question above. As I know, without a doubt, that I can
>> load a .js file after the page has loaded *without* reloading the page.
>
> If it is what I think,
> can you give me back the address of this test page ?
> I'm unable to find it.

<URL: http://members.aol.com/_ht_a/hikksnotathome/loadJSFile/>

That one?

Randy Webb

unread,
Mar 13, 2007, 7:35:22 PM3/13/07
to
ASM said the following on 3/13/2007 2:44 PM:

> Ivan Marsh a écrit :
>>
>> Do it by dropping a second <script
>> type='text/javascript'src='controlador.js'></script> line on to the
>> page... it cannot be done without reloading the page.
>
> with DOM it is possible.
>
> But ... possibly IE can't understand that ?

IE can't understand what part? IE is easier to load a script,
dynamically, than any other browser:

<script id="myScript" src="file1.js" type="text/javascript"></script>
<script type="text/javascript">
document.getElementById('myScript').src="file2.js";
</script>

I don't recall for sure but I believe IE even handles it as a plain
myScript.src instead of the gEBI call.

ASM

unread,
Mar 13, 2007, 8:02:31 PM3/13/07
to
Randy Webb a écrit :

> ASM said the following on 3/13/2007 2:42 PM:
>> If it is what I think,
>> can you give me back the address of this test page ?
>> I'm unable to find it.
>
> <URL: http://members.aol.com/_ht_a/hikksnotathome/loadJSFile/>
>
> That one?

Oui ! Impeccable. Thanks


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

ASM

unread,
Mar 13, 2007, 8:11:21 PM3/13/07
to
Randy Webb a écrit :

> ASM said the following on 3/13/2007 2:44 PM:
>>
>> with DOM it is possible.
>>
>> But ... possibly IE can't understand that ?
>
> IE can't understand what part?

It is so mysterious ... how to know ? :-)

> IE is easier to load a script,
> dynamically, than any other browser:

> <script type="text/javascript">


> document.getElementById('myScript').src="file2.js";
> </script>
>
> I don't recall for sure but I believe IE even handles it as a plain
> myScript.src instead of the gEBI call.

it would be not very surprising (with all approximations it accepts)

RobG

unread,
Mar 13, 2007, 10:02:46 PM3/13/07
to
On Mar 14, 2:49 am, "Evertjan." <exjxw.hannivo...@interxnl.net> wrote:
> Randy Webb wrote on 13 mrt 2007 in comp.lang.javascript:
>
> > <proposal>
> > How can a script element/file be dynamically loaded after the page has
> > finished loading?
> > </proposal>
>
> ... be loaded and executed ...
>
> Loading with AJAX to be shown as text,
> does not seem the point,
> and such loading as text and then simple eval()-ing
> seems too evil to contemplate.

Never-the-less, it is a common practice to return HTML, strip the
script elements, add the result to the page using innerHTML and eval
the content of the script elements.

It causes quite a few questions related to the change of scope for
eval'd script.


--
Rob

Evertjan.

unread,
Mar 14, 2007, 5:47:47 AM3/14/07
to
RobG wrote on 14 mrt 2007 in comp.lang.javascript:

> On Mar 14, 2:49 am, "Evertjan." <exjxw.hannivo...@interxnl.net> wrote:
>> Randy Webb wrote on 13 mrt 2007 in comp.lang.javascript:
>>
>> > <proposal>
>> > How can a script element/file be dynamically loaded after the page has
>> > finished loading?
>> > </proposal>
>>
>> ... be loaded and executed ...
>>
>> Loading with AJAX to be shown as text,
>> does not seem the point,
>> and such loading as text and then simple eval()-ing
>> seems too evil to contemplate.
>
> Never-the-less, it is a common practice to return HTML, strip the
> script elements, add the result to the page using innerHTML and eval
> the content of the script elements.

Common?

Eval-utionarily evel perhaps?

> It causes quite a few questions related to the change of scope for
> eval'd script.

Indeed.

Bart Lateur

unread,
Mar 14, 2007, 3:15:14 PM3/14/07
to
ojvm wrote:

>now when the page has been loaded, acording some user's actions, i'd
>like to add a new script, like this.

...
>right now i'm doing this.
>
>document.write("<script type='text/javascript'src='new-file-just-
>added.js''></script>");
>
>obviusly this is not working properly, because, i think, in that way
>all the content is erased.

Don't use document.write. Use document.createElement('script'), set the
src, and then do appendChild. You can do it in the head, like this:

head = document.getElementsByTagName('head')[0];
head.appendChild(script);

but you can also add it to the body, which is easier:

document.body.appendChild(script);

--
Bart.

Richard Cornford

unread,
Mar 14, 2007, 5:36:58 PM3/14/07
to
RobG wrote:

> On Mar 14, 2:49 am, Evertjan. wrote:
>> Randy Webb wrote on 13 mrt 2007 in comp.lang.javascript:
>>
>>> <proposal>
>>> How can a script element/file be dynamically loaded after
>>> the page has finished loading?
>>> </proposal>
>>
>> ... be loaded and executed ...
>>
>> Loading with AJAX to be shown as text,
>> does not seem the point,
>> and such loading as text and then simple eval()-ing
>> seems too evil to contemplate.
>
> Never-the-less, it is a common practice to return HTML,
> strip the script elements, add the result to the page
> using innerHTML and eval the content of the script elements.

Has "common practice" ever been a good justification for anything when it
comes to browser scripting? After all it is common practice to expose
visitors to web site scripts that spit out javascript errors at the
slightest provocation, so common that even organisations a big (and
presumably well-funded) as google do it all the time.

> It causes quite a few questions related to the change of
> scope for eval'd script.

Yes, and often form people who want to be told how to dig themselves out
of the hole they have gotten themselves into.

Richard.

RobG

unread,
Mar 14, 2007, 7:17:25 PM3/14/07
to
On Mar 15, 7:36 am, "Richard Cornford" <Rich...@litotes.demon.co.uk>
wrote:

> RobG wrote:
> > On Mar 14, 2:49 am, Evertjan. wrote:
> >> Randy Webb wrote on 13 mrt 2007 in comp.lang.javascript:
>
> >>> <proposal>
> >>> How can a script element/file be dynamically loaded after
> >>> the page has finished loading?
> >>> </proposal>
>
> >> ... be loaded and executed ...
>
> >> Loading with AJAX to be shown as text,
> >> does not seem the point,
> >> and such loading as text and then simple eval()-ing
> >> seems too evil to contemplate.
>
> > Never-the-less, it is a common practice to return HTML,
> > strip the script elements, add the result to the page
> > using innerHTML and eval the content of the script elements.
>
> Has "common practice" ever been a good justification for anything when it
> comes to browser scripting?

I didn't infer support or approval for the technique, I just noted the
fact that its use is reasonably common. Many AJAX libraries include a
method to eval script elements returned in HTML fragments, which is
not so subtle encouragement to do so.

If it is worth noting as an issue, perhaps the FAQ entry should say
something about it?


--
Rob

Randy Webb

unread,
Mar 14, 2007, 8:53:28 PM3/14/07
to
RobG said the following on 3/14/2007 7:17 PM:

That, to me, is just one more strike against the many libraries. And
another reason I am glad I don't use AJAX :)

> If it is worth noting as an issue, perhaps the FAQ entry should say
> something about it?

Any ideas on what it might say? The entry on it will probably point to a
Notes page because the entire issue is way too large for a simple
answer. And the Notes page can go in detail with regards to scope
issues, document.write issues (in the script block) and all the other
problems with it.

Bart Van der Donck

unread,
Mar 15, 2007, 8:00:07 AM3/15/07
to
Randy Webb wrote:

> RobG said the following on 3/14/2007 7:17 PM:

>> I didn't infer support or approval for the technique, I


>> just noted the fact that its use is reasonably common.
>> Many AJAX libraries include a method to eval script elements
>> returned in HTML fragments, which is not so subtle
>> encouragement to do so.
>
> That, to me, is just one more strike against the many
> libraries. And another reason I am glad I don't use AJAX :)

Same here. I do add some ajaxy-looking tricks here and there (no need
to look like a 1995 CGI), but I have always been reluctant to lean too
heavily on client scripts for fundamental issues.

I would even state that this also applies to javascript as a whole -
it's never played a crucial role in my development strategies. The
technology at the server side is just too long-proven and too good,
mainly because of a higher level of efficiency, reliability,
conceptuality, tradition and more possibilities. I realize that this
view may be somewhat coloured by personal preferences and experiences.

--
Bart

0 new messages