Script elements written with document.write in a window opened with window.open are not executed in IE8 on Windows 7
Question
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.
3 answers
solution1
6 ACCPTED 2010-07-05 05:59:38
Try something like this (untested):
var s=document.createElement('script');
s.type = "text/javascript";
s.src = "test.js";
document.body.appendChild(s);
solution2
1
You might want to consider wrapping your alert calls in function definitions in the imported js files, and then add an onLoad to the body tag of windowHTML that calls the function
EDIT:
<!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();
w.document.writeln("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">");
w.document.writeln("<html>");
w.document.writeln("<head>");
w.document.writeln("<script type=\"text/javascript\" src=\"test.js\"></scr"+"ipt>");
w.document.writeln("<script type=\"text/javascript\" src=\"test2.js\"></scr"+"ipt>");
w.document.writeln("</head>");
w.document.writeln("<body onload=\"test();test2()\">");
w.document.writeln("</body>");
w.document.writeln("</html>");
w.document.close();
</script>
</head>
<body>
</body>
</html>
solution3
-1 2010-07-02 04:47:16
I'm not sure what is your purpose of calling a popup... if it is not essential to have a seperate window, you may try to have a overlaying layer on the existing page instead.. some people call it a lightbox.
window.open function on some browsers will initially prompt user to "accept pop-up" (which I do find annoying), if you don't need a popup and can implement everything on the same page, you can use the jQuery .load function instead to load the content into a container (without reloading the page).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.