1. 技术文章
  2. Why won't this JavaScript (using document.open and document.write) work in Internet Explorer or Opera?

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

由 巧了我就是萌 提交于 2019-11-27 09:07:48

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="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.

As most people have already covered, IE has serious issues when attempting to do something simple like:

var doc = window.frames['your_frame'].document;
doc.open();
doc.write('<body><script src="external_resource.js"><\/script>');
doc.close();

After exhaustive searching, I found this this write-up which suggests using the javascript: URI scheme to insert the content into the iframe document. I've personally tested this solution in current versions of FF, Chrome, & Safari, as well as IE 7/8/9/10.

Borrowing from his examples, the following would work in place of my example above, and could be used to achieve what you're going after:

var iframe = window.frames['your_frame'];
var content = '<body><script src="external_resource.js"><\/script>';
iframe.contentWindow.contents = content;
iframe.src = 'javascript:window["contents"]';

I've heard it told that older versions of Safari don't handle the javascript: URI scheme very well, but I couldn't find a way to confirm as everyone using Safari seems to upgrade regularly. I also don't know if this runs into character limit problems for the URI in IE (since it is smaller than every other browser), but it's worth looking into for those of you suffering from a similar problem.

The fundamental problem is that in IE you can't do

iframe_document.open();
iframe_document.write('<script src="foo.js"><\/script>');
iframe_document.close();

Once document.close() is called on the iframe, IE seems to halt all javascript execution there. The js thread runs that document.close() while the http request for foo.js is outstanding, so the file is loaded but never executed.

I haven't found any way for the parent page to know that the script executing within the iframe is completely finished. One work-around is to make foo.js responsible for calling document.close() itself -- not very pleasant, but if you don't mind changing the called script, it does the trick.

Note: you must not document.write('document.close()') into the iframe directly: that causes IE to hang hard. But setTimeout(function(){document.close()}, 0) seems immune — as does a document.close() inside a loaded script sometimes. Ugh.

You should load the content of the iframe with the "src" attribute: the body of an iframe is used by browsers that don't support it to display an alternative message. You are, instead, injecting in the iframe a full, inline, html document and some browsers won't like it. More info here.

If you want to send messages to the iframe from the main document there's a nice tutorial on the John Resig's blog.

Would something as simple as:

function render(data) {
    document.body.innerHTML = data;
}

Solve your problems? Works in IE8/Win7.

That’s bizarre, and Michael Kleber is mistaken: all of the alerts come up just fine, so the problem isn’t that the script doesn’t execute. It does execute.

Observe the following changes to main.js:

$(document).ready(function() {

  // note that render() has to be moved into the window scope
  window.render = function(data) {
    document.open();
    alert('opened');
    document.write(data);
    alert('written');
    document.close();
    alert('closed');
  }

  function load() {
    $.ajax({
      url: 'jsonp.js',
      dataType: 'script'
    });
  }

  window.callback = function(data) {
    // does not work
    render(data);

    // works
    window.data = data;
    var t = setTimeout("render(data)", 0);
  }

  load();

});
标签
javascript
iframe
scope
document
document.write
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!