title: Why won't this JavaScript (using document.open and document.write) work in Internet Explorer or Opera?
body: <p>I desperately need some help on this one.</p>
  
  <p>I've created a &lt;script&gt; that closely parallels, and reproduces the problem of, another more complex &lt;script&gt; that I've written elsewhere.</p>
  
  <p>Here's what it does:</p>
  
  <ul>
  <li>creates an &lt;iframe&gt; and inserts in into a &lt;div&gt; on the page</li>
  <li>creates and appends a document to that &lt;iframe&gt;, which contains a &lt;script&gt; that defines a few functions (including a callback function and a function that loads an external &lt;script&gt; using AJAX)</li>
  <li>the latter external script is just a call to the callback function, which calls a function that creates a document and appends it to the &lt;iframe&gt; it's in; this should effectively overwrite the &lt;script&gt;</li>
  </ul>
  
  <p>The three files involved are:</p>
  
  <ul>
  <li><a href="http://troy.onespot.com/static/document_write/index.html" rel="noreferrer">http://troy.onespot.com/static/document_write/index.html</a> (the main page)</li>
  <li><a href="http://troy.onespot.com/static/document_write/main.js" rel="noreferrer">http://troy.onespot.com/static/document_write/main.js</a> (the first &lt;script&gt; that's loaded)</li>
  <li><a href="http://troy.onespot.com/static/document_write/jsonp.js" rel="noreferrer">http://troy.onespot.com/static/document_write/jsonp.js</a> (the &lt;script&gt; loaded by jQuery's $.ajax() method)</li>
  </ul>
  
  <p>This all works in Firefox, Safari, and Chrome. Where it breaks down is in Internet Explorer and Opera. What happens is that the render() function in main.js executes, and all three alerts are fired, but the document in the &lt;iframe&gt; is not overwritten. I can't tell what document is being created or written to, or if one is at all.</p>
  
  <p>If I add debug code (like console.log(document)) in the beginning of the render() function, the working browsers seem to get a handle on the existing &lt;iframe&gt; document and list the properties included below. Internet Explorer also appears to find a document of some sort. I just can't tell why it's not letting me overwrite it.</p>
  
  <p>Could it be an issue of scope? Maybe I'm using the document.write(), document.open() or document.close() methods improperly, and Firefox and a few other browsers are just letting me get away with it?</p>
  
  <p>One possible clue: if I take the guts of the render() function out (i.e., just put them after load() in main.js), this works fine. That suggests to me that it's not how I'm using document.open(), etc., but that somehow by the time that the callback() function is executed, the document object is not available, or has gone out of scope, or something like that.</p>
  
  <p>This has me totally stumped, and it's for a very important project with an impending deadline. I'm not above a hack or workaround if it gets me out of this jam. Any help or insight would be EXTREMELY appreciated!</p>
  
  <p>console.log()'s listing of the document properties:</p>
  
  <pre>ATTRIBUTE_NODE: 2
  CDATA_SECTION_NODE: 4
  COMMENT_NODE: 8
  DOCUMENT_FRAGMENT_NODE: 11
  DOCUMENT_NODE: 9
  DOCUMENT_POSITION_CONTAINED_BY: 16
  DOCUMENT_POSITION_CONTAINS: 8
  DOCUMENT_POSITION_DISCONNECTED: 1
  DOCUMENT_POSITION_FOLLOWING: 4
  DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32
  DOCUMENT_POSITION_PRECEDING: 2
  DOCUMENT_TYPE_NODE: 10
  ELEMENT_NODE: 1
  ENTITY_NODE: 6
  ENTITY_REFERENCE_NODE: 5
  NOTATION_NODE: 12
  PROCESSING_INSTRUCTION_NODE: 7
  TEXT_NODE: 3
  URL: "http://localhost/projects/test/ajax_loader/document_write/index.html"
  activeElement: HTMLBodyElement
  addEventListener: function addEventListener() {
  adoptNode: function adoptNode() {
  alinkColor: ""
  all: HTMLCollection
  anchors: HTMLCollection
  appendChild: function appendChild() {
  applets: HTMLCollection
  attributes: null
  baseURI: "http://localhost/projects/test/ajax_loader/document_write/index.html"
  bgColor: ""
  body: HTMLBodyElement
  captureEvents: function captureEvents() {
  characterSet: "UTF-8"
  charset: "UTF-8"
  childNodes: NodeList
  clear: function clear() {
  cloneNode: function cloneNode() {
  close: function close() {
  compareDocumentPosition: function compareDocumentPosition() {
  compatMode: "BackCompat"
  cookie: "__gads=ID=62bb88ab20ac9451:T=1256683145:S=ALNI_Mbso-nFjAvRzYhCSwhiuaDh84G8CA"
  createAttribute: function createAttribute() {
  createAttributeNS: function createAttributeNS() {
  createCDATASection: function createCDATASection() {
  createComment: function createComment() {
  createDocumentFragment: function createDocumentFragment() {
  createElement: function createElement() {
  createElementNS: function createElementNS() {
  createEntityReference: function createEntityReference() {
  createEvent: function createEvent() {
  createExpression: function createExpression() {
  createNSResolver: function createNSResolver() {
  createNodeIterator: function createNodeIterator() {
  createProcessingInstruction: function createProcessingInstruction() {
  createRange: function createRange() {
  createTextNode: function createTextNode() {
  createTreeWalker: function createTreeWalker() {
  defaultCharset: "iso-8859-1"
  defaultView: DOMWindow
  designMode: "off"
  dir: ""
  dispatchEvent: function dispatchEvent() {
  doctype: null
  documentElement: HTMLHtmlElement
  documentURI: "http://localhost/projects/test/ajax_loader/document_write/index.html"
  domain: "localhost"
  elementFromPoint: function elementFromPoint() {
  embeds: HTMLCollection
  evaluate: function evaluate() {
  execCommand: function execCommand() {
  fgColor: ""
  firstChild: HTMLHtmlElement
  forms: HTMLCollection
  getCSSCanvasContext: function getCSSCanvasContext() {
  getElementById: function getElementById() {
  getElementsByClassName: function getElementsByClassName() {
  getElementsByName: function getElementsByName() {
  getElementsByTagName: function getElementsByTagName() {
  getElementsByTagNameNS: function getElementsByTagNameNS() {
  getOverrideStyle: function getOverrideStyle() {
  getSelection: function getSelection() {
  hasAttributes: function hasAttributes() {
  hasChildNodes: function hasChildNodes() {
  hasFocus: function hasFocus() {
  height: 150
  images: HTMLCollection
  implementation: DOMImplementation
  importNode: function importNode() {
  inputEncoding: "UTF-8"
  insertBefore: function insertBefore() {
  isDefaultNamespace: function isDefaultNamespace() {
  isEqualNode: function isEqualNode() {
  isSameNode: function isSameNode() {
  isSupported: function isSupported() {
  jQuery1258269389622: 2
  lastChild: HTMLHtmlElement
  lastModified: ""
  linkColor: ""
  links: HTMLCollection
  localName: null
  location: Location
  lookupNamespaceURI: function lookupNamespaceURI() {
  lookupPrefix: function lookupPrefix() {
  namespaceURI: null
  nextSibling: null
  nodeName: "#document"
  nodeType: 9
  nodeValue: null
  normalize: function normalize() {
  open: function open() {
  ownerDocument: null
  parentElement: null
  parentNode: null
  plugins: HTMLCollection
  preferredStylesheetSet: null
  prefix: null
  previousSibling: null
  queryCommandEnabled: function queryCommandEnabled() {
  queryCommandIndeterm: function queryCommandIndeterm() {
  queryCommandState: function queryCommandState() {
  queryCommandSupported: function queryCommandSupported() {
  queryCommandValue: function queryCommandValue() {
  querySelector: function querySelector() {
  querySelectorAll: function querySelectorAll() {
  readyState: "complete"
  referrer: "http://localhost/projects/test/ajax_loader/document_write/index.html"
  releaseEvents: function releaseEvents() {
  removeChild: function removeChild() {
  removeEventListener: function removeEventListener() {
  replaceChild: function replaceChild() {
  scripts: HTMLCollection
  selectedStylesheetSet: null
  styleSheets: StyleSheetList
  textContent: null
  title: " Page"
  vlinkColor: ""
  width: 300
  write: function write() {
  writeln: function writeln() {
  xmlEncoding: null
  xmlStandalone: false
  xmlVersion: null</pre>