Javascript iframe caching issue
I hava an iframe which loads some javascript via javascript. In internet explorer only, this works if and only if IE has a cached copy of the javascript. This means that reloading the page (or otherwise triggering the script to run again, if it's stuck in a function or whatever) will cause this code to work, otherwise it will not. In particular, the document.write call fails to happen.
Main Page:
<iframe height = "200" width = "200" id = "happy">
</iframe>
<script type="text/javascript">
var a = document.getElementById("happy");
scripttxt = '开发者_开发知识库<a href="#" id="joy">JOY</a><'+'script type="text/javascript" src="fail.js"></'+'script>';
a.src = "about:blank";
a.contentWindow.document.open();
a.contentWindow.document.write("<h3>Preview:</h3>" + scripttxt + "");
a.contentWindow.document.close();
</script>
fail.js:
document.write(document.getElementById("joy"));
I realize I could use conditional comments to have IE skip document.open()
and document.close()
in the script of Main Page, but having IE skip document.open() and document.close() feels a bit hacky (Edit)...and breaks other things in IE.
Edit:
When it works properly, the iframe will contain, under the preview heading, the text: JOYhttp://mymachine:myport/mainpage.htm#
, where JOY is a hyperlink. When it fails, it will omit http://mymachine:myport/mainpage.htm#
. I don't actually care how how document.write handles writing the a
node, just that it is able to get the element successfully and write something successfully.
I also tried this version of the script, at Justin's advice, but it behaves exactly the same:
var a = document.getElementById("happy");
a.src = "about:blank";
r = document.createElement("a");
r.id="joy";
r.href="#";
r.innerText="JOY";
s = document.createElement("script");
s.src="fail.js";
a.contentWindow.document.body.appendChild(r);
a.contentWindow.document.body.appendChild(s);
Why are you using document.write
? Instead, try appending a script node.
var d = document.getElementById("happy"),
s = document.createElement("script");
s.src= "http://asdf.com/asdf.js";
d.contentWindow.document.body.appendChild(s);
Try changing your code to look like this:
// ...
var doc = a.contentWindow.document.open();
doc.write("<h3>Preview:</h3>" + scripttxt + "");
doc.close();
oh wait no, that's got a similar issue.
Well, mashing on your document with "document.write" is kind-of wacky anyway. What's the overall goal here? Can't you add content to the document some other way?
I think I understand what you're getting at however: one would kind-of expect that the browser would obey the normal way of things, loading the script (and waiting for that HTTP GET to complete), running the script — which should mean that the "write" call in the script should still have the document open — and then return. Then again, it seems a little dicey to me, given that it's a single-threaded environment we're talking about.
My current solution, which seems to work, is this:
Change
a.contentWindow.document.close();
to
if (!isIE) {a.contentWindow.document.close();}
and add this code above the script:
<script type='text/javascript'>
isIE = false;
</script>
<!--[if IE]>
<script type='text/javascript'>
isIE = true;
</script>
<![endif]-->
This solution makes me feel very sad.
精彩评论