Why won’t this JavaScript (using document.open and document.write) work in Internet Explorer or Opera?

by

if I take the guts of the render() function out (i.e., just put them after load() in main.js), this works fine.

Doesn’t for me in IE8. If I lose the AJAX call completely and just call render() in main.js, I get the same result. In fact even if I replace the whole of main.js with just:

document.write('hello!');

with or without opening the document, the hello never appears!

If I put any timeout (even 0) on the call to render in main.js, it works. The timeout on the parent document, on the other hand, doesn’t seem to be doing anything.

This extreme weirdness is caused by jQuery using a temporarily-inserted <script> tag to execute the code returned by in jsonp.js. If you simply call eval on the return value instead of having jQuery execute it, it works fine.

A related problem I found narrowing down the hello example is demonstrated by index.html:

<body>
<iframe name="foo"></iframe>
<script>
    var idoc= frames['foo'].document;
    idoc.open();
    idoc.write('<body><script src="https://stackoverflow.com/questions/1736886/main.js"><\/script>');
    idoc.close();
</script>

with main.js containing:

document.write('foo');

There is no foo written. (An inline script, on the other hand, was fine.)

If the idoc.close was omitted, it worked. If an additional idoc.write('bar') was added, the bar was written before foo in IE only. If I added both bar and the close call, IE crashed.

So to summarise, there are deep problems using document.write from inside a document that was itself written by document.write! Try to avoid it if at all possible. document.open can be a useful way to populate an iframe from a parent document, but you shouldn’t really be needing it inside the child document, where you can use DOM methods on yourself.

More Related Contents:

  1. Get IFrame’s document, from JavaScript in main document
  2. “Access is denied” JavaScript error when trying to access the document object of a programmatically-created (IE-only)
  3. What’s the most concise cross-browser way to access an element’s window and document?
  4. How do JavaScript closures work?
  5. Resizing an iframe based on content
  6. Frame Buster Buster … buster code needed
  7. What are alternatives to document.write?
  8. Get current URL from IFRAME
  9. var self = this?
  10. Can I access variables from another file?
  11. Global variables in Javascript across multiple files
  12. How to refresh an IFrame using Javascript?
  13. JavaScript variable binding and loop
  14. Access elements of parent window from iframe
  15. cross-domain iframe resize
  16. array.length is zero, but the array has elements in it [duplicate]
  17. Write elements into a child iframe using Javascript or jQuery
  18. Is window really global in Javascript?
  19. Uncaught DOMException: Blocked a frame with origin “http://localhost:8080” from accessing a cross-origin frame while listing the iframes in page
  20. Variables set during $.getJSON function only accessible within function
  21. How can I return a variable from a $.getJSON function
  22. How to auto-size an iFrame? [duplicate]
  23. Good Reasons why not to use Iframes in page content [closed]
  24. Open link in iframe [closed]
  25. JavaScript scope and closure
  26. JavaScript Variable Scope [duplicate]
  27. cross-domain iframe resizer?
  28. What happens when JavaScript variable name and function name is the same?
  29. Refresh iFrame (Cache Issue)
  30. Passing a global variable to a function

Leave a Comment