By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,313 Members | 1,145 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,313 IT Pros & Developers. It's quick & easy.

document.write, script tags, and IE (execution order)

P: 4
I'm little more than a novice when it comes to javascript, and this particular problem has been driving me mad for the past few days...

The Problem:

I have a javascript file that uses document.write to send output to the browser. This javascript file contains some html code and another script tag.

The execution order in Internet Explorer (6&7) appears to be different than that of browsers such as FireFox.

Example:

myjs.js
Expand|Select|Wrap|Line Numbers
  1. var output = '<ul><li id=\"myli\"><scr'+'ipt type=\"text/javascript\" src=\"3rdparty.js\"></scr'+'ipt></li></ul>';
  2. document.write(output);
  3.  
3rdparty.js
Expand|Select|Wrap|Line Numbers
  1. document.write('3rd party output');
FireFox Output:
<ul><li>3rd party output</li></ul>

Internet Explorer:
<ul><li></li></ul>3rd party output

Experimenting:

I don't have control over the content / output of the 3rdparty.js file, and the html code in the output var always arrives as a string (although it can be processed server-side using php if need be).

I therefore did a bit of reading up on DOM functions such as appendChild, and tried to combine it with usage of innerHTML to include the html string in a div, then execute the script tag.

myjs.js (amended)
Expand|Select|Wrap|Line Numbers
  1. function scripts(id) {
  2.     var el = document.getElementById(id).getElementsByTagName("script");
  3.     var limit = el.length;
  4.     for(var x=0; x < limit; x++) {
  5.         newScript = document.createElement("script");
  6.         newScript.type = "text/javascript";
  7.         if(el[x].text != "") {
  8.             newScript.text = el[x].text;
  9.         } else {
  10.             newScript.src = el[x].src;
  11.         }
  12.         document.getElementById(id).innerHTML = "";
  13.         document.getElementById(id).appendChild(newScript);
  14.     }
  15. }
  16. var div = '<div id=\"mydiv\"></div>';
  17. var output = '<ul><li id=\"myli\"><scr'+'ipt type=\"text/javascript\" src=\"3rdparty.js\"></scr'+'ipt></li></ul>';
  18. document.write(div);
  19. var el = document.getElementById('mydiv');
  20. el.innerHTML = output;
  21. scripts('myli');
  22.  
This method hung FireFox (it didn't seem to like my use of appendChild?) and produced the same output for IE as before.

If anyone else with a greater understanding of javascript could point me in the right direction, I'd really appreciate it.
Mar 17 '09 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
Is there any chance you could change document.write (in the 3rd party file) to DOM statements? For example:
Expand|Select|Wrap|Line Numbers
  1. var el = document.createElement("div");
  2. txt = document.createTextNode("some output");
  3. el.appendChild(txt);
then this div could be appended to the list after page load.
Mar 18 '09 #2

P: 4
Thanks for the reply.

Do you mean re-writing the 3rd party file itself to use DOM statements? If so, that won't be possible in all cases unfortunately (it may not always be the same javascript file).

If the html in the "myjs.js" file were to be split up so that each section was placed in a different function, and then each function executed once the other had fully loaded, would that overcome the sequencing issue?

Expand|Select|Wrap|Line Numbers
  1. function write(output) {
  2.     document.write(output);
  3. }
  4.  
  5. var block1 = '<ul><li id=\"myli\">';
  6. var block2 = '<scr'+'ipt type=\"text/javascript\" src=\"3rdparty.js\"></scr'+'ipt>';
  7. var block3 = '</li></ul>';
  8.  
  9. //begin immediately
  10. write(block1);
  11. //begin once block1 finished
  12. write(block2);
  13. //begin once block2 finished
  14. write(block3);
I realise that doesn't include any event driven callback (as I'm not quite sure how to do that), but would the theory work?
Mar 18 '09 #3

acoder
Expert Mod 15k+
P: 16,027
Possibly, but a timeout may help:
Expand|Select|Wrap|Line Numbers
  1. setTimeout(function() { write(block2); }, 1000);
Mar 18 '09 #4

P: 4
The timeout didn't seem to help, even when substituting the script tag for some plain text. I'm thinking that is due to the use of the deprecated document.write?

I'm therefore back to square 1 (almost). You mentioned using DOM functions earlier instead of document.write. Is there a wrapper function that can replace it, so that I could write each one of the blocks to the DOM, one by one?

Expand|Select|Wrap|Line Numbers
  1. var block1 = '<ul><li>';
  2. var block2 = '<scr'+'ipt type=\"text/javascript\" src=\"test.js\"></scr'+'ipt>';
  3. var block3 = '</li></ul>';
Mar 18 '09 #5

acoder
Expert Mod 15k+
P: 16,027
If you can change just the document.write part, then there is a simple solution. Change document.write to:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("myli").innerHTML = "3rd party output";
Then add a function onload which adds this script to the head:
Expand|Select|Wrap|Line Numbers
  1. window.onload=function() {
  2.     var head = document.getElementsByTagName("head")[0];
  3.     var script = document.createElement("script");
  4.     script.type = "text/javascript";
  5.     script.src = "3rdparty.js";
  6.     head.appendChild(script);
  7. }
Mar 19 '09 #6

P: 4
Thanks for helping out, I appreciate it. Sorry it's taken a while for me to reply.

Expand|Select|Wrap|Line Numbers
  1. document.getElementById("myli").innerHTML = "3rd party output"
Did you mean for the code above to be a replacement for document.write in the 3rdparty.js file in first post example? If so, then I can't do that, as I can't modify the 3rdparty.js file.

It seems like there might not be a solution, unless I've mis-understood your post above?
Apr 19 '09 #7

acoder
Expert Mod 15k+
P: 16,027
Unfortunately, that is what I did mean. One possibility is to write the content to some element(s) and then use DOM methods to move it around, e.g. if written to a temporary holder <div id="temp"></div> and then set the li content to this div content after the page has loaded. Not optimal, but at least it would guarantee correct results.
Apr 21 '09 #8

Post your reply

Sign in to post your reply or Sign up for a free account.