Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Script elements written with document.write in a window opened with window.open are not executed in IE8 on Windows 7

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.

like image 496
Jennifer Grucza Avatar asked Jun 24 '10 21:06

Jennifer Grucza


People also ask

What is window open in JavaScript?

Definition and Usage. The open() method opens a new browser window, or a new tab, depending on your browser settings and the parameter values.

How to close open window using Js?

To close your current window using JS, do this. First open the current window to trick your current tab into thinking it has been opened by a script. Then close it using window. close().

What method is used to close a window in JavaScript?

close() The Window. close() method closes the current window, or the window on which it was called. This method can only be called on windows that were opened by a script using the Window.


1 Answers

Try something like this (untested):

var s=document.createElement('script');
s.type = "text/javascript";
s.src = "test.js";
document.body.appendChild(s);
like image 144
Dagg Nabbit Avatar answered Oct 13 '22 18:10

Dagg Nabbit