473,327 Members | 2,090 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

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

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
7 8947
acoder
16,027 Expert Mod 8TB
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
sj071
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
16,027 Expert Mod 8TB
Possibly, but a timeout may help:
Expand|Select|Wrap|Line Numbers
  1. setTimeout(function() { write(block2); }, 1000);
Mar 18 '09 #4
sj071
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
16,027 Expert Mod 8TB
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
sj071
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
16,027 Expert Mod 8TB
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

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

Similar topics

2
by: Adam | last post by:
Hey gang, I'm trying to have a certain piece of html be written into a document depending on the browser (specifically, Netscape). Anyway, I have the following INSIDE the html (nested in a...
6
by: Mike Daniel | last post by:
I am attempting to use document.write(pageVar) that displays a new html page within a pop-up window and the popup is failing. Also note that pageVar is a complete HTML page containing other java...
12
by: Radek Maciaszek | last post by:
Hi It's very interesting problem. I couldn't even find any inforamtion about it on the google. I think that the best way of explain will be this simple example: <html> <body> <script...
4
by: Prowler | last post by:
In the application we are currently building, we need to write positioning code on-the-fly, based upon the screen offset of the element in the AS/400 application which drives the Web app. The 400,...
12
by: Sean | last post by:
Hi, I have the following script: ----------------------------------------------------------------------------------- <script type="text/javaScript"> <!-- document.write('<div...
136
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their...
11
by: Erwin Moller | last post by:
Hi group, I stumbled on something strange. I simplified the problem to this: A straightforward page with some JS: <span id="testid"> Hi
11
by: Michael Powe | last post by:
How can I make an XHTML-compliant form of an expression in this format: document.write("<scr"+"ipt type='text/javascript' src='path/to/file.js'>"+"</scr"+"ipt>"); this turns out to be a...
9
by: sonnystarks | last post by:
I am taking a course in writing javascript and it (and all the books I have been reading) tell me that if I will use the document.write syntax, I will be able to "place text on the page." None...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.