I’m running into an issue that seems to only appear on Windows 7. It seemed to work fine in IE8 on a different version of Windows. Basically, I’m creating a new window with window.open(), then using document.write() to write the contents of that new window, which contains script includes. In IE, these scripts are not being executed properly. Most of the time they don’t execute at all, but occasionally one of them will. This is only with a cleared cache – once the javascript files are in the cache, it works fine.
Boiled down test case:
test.html:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<script type="text/javascript">
var w = window.open();
var windowHTML = "\
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>\n\
<html>\n\
<head>\n\
<script type='text/javascript' src='test.js'></scr"+"ipt>\n\
<script type='text/javascript' src='test2.js'></scr"+"ipt>\n\
</head>\n\
<body>\n\
</body>\n\
</html>";
w.document.write(windowHTML);
w.document.close();
</script>
</head>
<body>
</body>
</html>
test.js:
alert("test");
test2.js:
alert("test2");
When I go to test.html, I would expect to see a new window pop up with alerts for “test” then “test2”. I do in most browsers, including IE6. However, when I try this in IE8 on Windows 7, it opens the blank page, but no alerts appear (or occasionally just one).
Is it some sort of timing issue? Has anyone else seen this? Is there some way I can get around it?
Edit:
Here’s the code I tried that Rob Cooney wanted to see. Again, it works in other browsers, but not in IE8 on Windows 7.
test.htm:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<script type="text/javascript">
var w = window.open();
var windowHTML =
"<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>\n" +
"<html>\n" +
"<head>\n" +
" <script type='text/javascript' src='test.js'></scr"+"ipt>\n" +
" <script type='text/javascript' src='test2.js'></scr"+"ipt>\n" +
"</head>\n" +
"<body onload='test();test2()'>\n" +
"</body>\n" +
"</html>";
w.document.write(windowHTML);
setTimeout(function() {
w.document.close();
}, 10000);
</script>
</head>
<body>
</body>
</html>
test.js:
function test() {
alert("test");
}
test2.js:
function test2() {
alert("test2");
}
Also, I’ve posted this as a question on the MSDN forums here.
Accepting no’s workaround as the best answer. Here’s my modified code:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<script type="text/javascript">
var w = window.open();
var windowHTML =
"<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>\n" +
"<html>\n" +
"<head></head>\n" +
"<body></body>\n" +
"</html>";
w.document.write(windowHTML);
w.document.close();
var s = w.document.createElement("script");
s.type = "text/javascript";
s.src = "test.js";
w.document.getElementsByTagName("HEAD")[0].appendChild(s);
var s2 = w.document.createElement("script");
s2.type = "text/javascript";
s2.src = "test2.js";
w.document.getElementsByTagName("HEAD")[0].appendChild(s2);
</script>
</head>
<body>
</body>
</html>
Note: the thing to watch out for with this solution is that the javascript files are now loaded asynchronously, so if you have dependencies between the files, you can’t be sure that they will load in the right order. I got around this with setTimeout and testing for the existence of variables in the first file before loading the second file.
Try something like this (untested):