470,849 Members | 1,383 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,849 developers. It's quick & easy.

Loading Javascript with XMLHTTP...?

Using XMLHTTP and DOM I'm able to load new HTML page content.

I'd now like to load small snippets of javascript with the HTML markup
and have that <script> incorporated into the page. If any of the loaded
script exists outside a function definition (eg: a call to a function),
I'd like that code to be executed as soon as its added to the DOM.

Can anyone suggest the best way to do this? I've Googled but not found
anything comprehensive. Do I need to use the eval() method or is there
a better way?

Thanks,

Steve

Jul 26 '05 #1
10 4721
sn****@mxlogic.com wrote:
Using XMLHTTP and DOM I'm able to load new HTML page content.

I'd now like to load small snippets of javascript with the HTML markup
and have that <script> incorporated into the page. If any of the loaded
script exists outside a function definition (eg: a call to a function),
I'd like that code to be executed as soon as its added to the DOM.

Can anyone suggest the best way to do this? I've Googled but not found
anything comprehensive. Do I need to use the eval() method or is there
a better way?

Thanks,

Steve


The best way is to add a script element with a src attribute:

var oS = document.createElement('script');
oS.type = 'text/javascript';
oS.src = 'someLink/cmd.js';

<URL:http://groups-beta.google.com/group/comp.lang.javascript/browse_frm/thread/f39a6a56185a49c1/a4c3d5dcce0a08e6?tvc=1&q=document.createElement(%2 7script%27)&hl=en#a4c3d5dcce0a08e6>

But not all browsers may support the above. Also be careful of calling
functions in any linked file as they must be downloaded & added to the
document before they are ready to use. Adding a script element and then
depending on its content being immediately available is risky.

Any statements outside functions will be executed when the script is loaded.

AFAIK, you can't modify the content of a script element dynamically.
You can clone a script element that has statements outside functions and
add it to some part of the document, but the statements will not be
executed (at least not in Firefox or IE).
--
Rob
Jul 27 '05 #2
I may be wrong about this, but you may also need to set the "defer"
attribute to true.

oS.defer="true";

Jul 27 '05 #3

<sn****@mxlogic.com> wrote in message
news:11**********************@o13g2000cwo.googlegr oups.com...
Using XMLHTTP and DOM I'm able to load new HTML page content.

I'd now like to load small snippets of javascript with the HTML markup
and have that <script> incorporated into the page. If any of the loaded
script exists outside a function definition (eg: a call to a function),
I'd like that code to be executed as soon as its added to the DOM.

Can anyone suggest the best way to do this? I've Googled but not found
anything comprehensive. Do I need to use the eval() method or is there
a better way?

Thanks,

Steve


you could add a hidden iframe to your page,
and load whatever url you want into it.
at the bottom of the iframe page, put some
script that does something, such as call a
function on the main page.
Jul 27 '05 #4
Thanks Rob,

Actually, I've got the method you suggest working well in another area
of my code. The problem is when I load HTML content dynamically using
XMLHTTP -- how do I get the script added when it is received as
"responseText" from the XMLHTTP request?

Perhaps I should parse the responseText and create new function
objects?

Hmm... tricky?

Steve

RobG wrote:
sn****@mxlogic.com wrote:
Using XMLHTTP and DOM I'm able to load new HTML page content.

I'd now like to load small snippets of javascript with the HTML markup
and have that <script> incorporated into the page. If any of the loaded
script exists outside a function definition (eg: a call to a function),
I'd like that code to be executed as soon as its added to the DOM.

Can anyone suggest the best way to do this? I've Googled but not found
anything comprehensive. Do I need to use the eval() method or is there
a better way?

Thanks,

Steve


The best way is to add a script element with a src attribute:

var oS = document.createElement('script');
oS.type = 'text/javascript';
oS.src = 'someLink/cmd.js';

<URL:http://groups-beta.google.com/group/comp.lang.javascript/browse_frm/thread/f39a6a56185a49c1/a4c3d5dcce0a08e6?tvc=1&q=document.createElement(%2 7script%27)&hl=en#a4c3d5dcce0a08e6>

But not all browsers may support the above. Also be careful of calling
functions in any linked file as they must be downloaded & added to the
document before they are ready to use. Adding a script element and then
depending on its content being immediately available is risky.

Any statements outside functions will be executed when the script is loaded.

AFAIK, you can't modify the content of a script element dynamically.
You can clone a script element that has statements outside functions and
add it to some part of the document, but the statements will not be
executed (at least not in Firefox or IE).
--
Rob


Jul 27 '05 #5
I suppose "eval" might work.

There is also a clue in RobG's answer.

var oScript=document.createElement("script");
oScript.text=[[variable holding responseText]];
oScript.defer="true";
document.getElementsById("head")[0].appendChild(oScript);

Jul 27 '05 #6
Thanks,

I think that's it :)

although I need to correct one line of your code...

document.getElementsById("head*")[0].appendChild(oScript);

should read...

document.getElementsByTagName("head*")[0].appendChild(oScript);
Steve

Jul 27 '05 #7
Baconbutty wrote:
I suppose "eval" might work.

There is also a clue in RobG's answer.
Setting the text attribute of the script element does indeed add and run
the script as the OP requires - my test had a typo in the script that
caused it to fail (dang browser thinks 'javascript' and 'javscript' are
two different things).

var oScript=document.createElement("script");
oScript.text=[[variable holding responseText]];
oScript.defer="true";
document.getElementsById("head")[0].appendChild(oScript);


The defer attribute does not necessarily affect when the script is run,
it affects what the browser does while the script is loading and
executing. I would expect the browser to load the entire script before
executing any part of it.

A test is to have a statement at the very start of a script file that
calls a function at the very bottom of the file with a large amount of
guff in between - I've never seen this fail (maybe I just haven't used a
large enough file or slow enough connection) - though in practice I
ensure all functions are loaded first).

My reading of the HTML spec is that 'defer' tells the UA that it can
load the script element content asynchronously because it doesn't
generate any document content. In other words, don't defer
parsing/rendering the rest of the document until the script is loaded
(which is kinda contrary to what you might expect 'defer=true' to mean).

"When set, this boolean attribute provides a hint to the user agent
that the script is not going to generate any document content (e.g.,
no "document.write" in javascript) and thus, the user agent can
continue parsing and rendering."

<URL:http://www.w3.org/TR/html4/interact/scripts.html#adef-defer>

And in the index of attributes it says:

"UA may defer execution of script"

<URL:http://www.w3.org/TR/html4/index/attributes.html>

The second reference seems to contradict the first somewhat, maybe the
words 'while the rest of the document loads' should be added.

'defer' is probably only of use if the script is in the body of the
document or loaded from an external file and there is something else for
the UA to get on with while it loads and executes.
--
Rob
Jul 28 '05 #8
Good catch.

Typing too hastily.

Jul 28 '05 #9
Thanks Rob. I think I have been using it primarily as a precaution,
without really thinking about it.

Jul 28 '05 #10
sn****@mxlogic.com wrote:
Thanks Rob,

Actually, I've got the method you suggest working well in another area
of my code. The problem is when I load HTML content dynamically using
XMLHTTP -- how do I get the script added when it is received as
"responseText" from the XMLHTTP request?

Perhaps I should parse the responseText and create new function
objects?

Hmm... tricky?


No, this is how I update some UI elements. I have a servlet which
produces DOM modifying javascript.

Then in the onreadystatechange method of the XMLHttpRequest, when it
reaches success status, with HTTP status 200, I do

new Function(request.responseText).call();

Aug 7 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by warteschlange | last post: by
1 post views Thread by ozzy.osborn | last post: by
5 posts views Thread by TMN | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.