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

[sj071]

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

var output = '<ul><li id=\"myli\"><scr'+'ipt type=\"text/javascript\" src=\"3rdparty.js\"></scr'+'ipt></li></ul>';
document.write(output);

3rdparty.js

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)

function scripts(id) {
	var el = document.getElementById(id).getElementsByTagName("script");
	var limit = el.length;
	for(var x=0; x < limit; x++) {
		newScript = document.createElement("script");
		newScript.type = "text/javascript";
		if(el[x].text != "") {
			newScript.text = el[x].text;
		} else {
			newScript.src = el[x].src;
		}
		document.getElementById(id).innerHTML = "";
		document.getElementById(id).appendChild(newScript);
	}
}
var div = '<div id=\"mydiv\"></div>';
var output = '<ul><li id=\"myli\"><scr'+'ipt type=\"text/javascript\" src=\"3rdparty.js\"></scr'+'ipt></li></ul>';
document.write(div);
var el = document.getElementById('mydiv');
el.innerHTML = output;
scripts('myli');

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.

[acoder]

Is there any chance you could change document.write (in the 3rd party file) to DOM statements? For example:

var el = document.createElement("div");
txt = document.createTextNode("some output");
el.appendChild(txt);

then this div could be appended to the list after page load.

[sj071]

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?

function write(output) {
	document.write(output);
}

var block1 = '<ul><li id=\"myli\">';
var block2 = '<scr'+'ipt type=\"text/javascript\" src=\"3rdparty.js\"></scr'+'ipt>';
var block3 = '</li></ul>';

//begin immediately
write(block1);
//begin once block1 finished
write(block2);
//begin once block2 finished
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?

[acoder]

Possibly, but a timeout may help:

setTimeout(function() { write(block2); }, 1000);

[sj071]

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?

var block1 = '<ul><li>';
var block2 = '<scr'+'ipt type=\"text/javascript\" src=\"test.js\"></scr'+'ipt>';
var block3 = '</li></ul>';

[acoder]

If you can change just the document.write part, then there is a simple solution. Change document.write to:

document.getElementById("myli").innerHTML = "3rd party output";

Then add a function onload which adds this script to the head:

window.onload=function() {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "3rdparty.js";
    head.appendChild(script);
}

[sj071]

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

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?

[acoder]

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.