Before I paste any code, here's the scenario:
- I have an HTML document that creates an empty iframe using JavaScript
- The JavaScript creates a function and attaches a reference to that function to the iframe's document object (using
doc.open() to get a reference to the document)
- The function is then attached as an
onload handler for the iframe's document (by writing <body onload="..."> into the iframe.
Now what has me stumped is that the global (window) and document objects inside the onload handler (while it's running) is different from the same objects run through JavaScript added via script nodes.
Here's the HTML:
<!doctype html>
<html>
<head>
<script>
(function(){
var dom,doc,where,iframe;
iframe = document.createElement('iframe');
iframe.src="javascript:false";
where = document.getElementsByTagName('script')[0];
where.parentNode.insertBefore(iframe, where);
doc = iframe.contentWindow.document;
var _doc = document;
doc.open()._l=function() {
// the window object should be the one that doc is inside
window.vanishing_global=new Date().getTime();
var js = this.createElement("script");
js.src = 'test-vanishing-global.js?' + window.vanishing_global;
window.name="foobar";
this.foobar="foobar:" + Math.random();
document.foobar="barfoo:" + Math.random();
// `this` should be the document object, but it's not
console.log("this == document: %s", this == document);
console.log("this == doc: %s", this == doc);
// the next two lines added based on @Ian's comment below
console.log("_doc == document: %s", _doc == document);
console.log("_doc == doc: %s", _doc == doc);
console.log("name: " + window.name + "
" + "window.vanishing_global: " + window.vanishing_global + "
typeof window.vanishing_global: " + typeof window.vanishing_global + "
document.foobar: " + document.foobar);
this.body.appendChild(js);
};
doc.write('<body onload="document._l();"></body>');
doc.close();
})();
</script>
</head>
<body>
</body>
</html>
And here's test-vanishing-global.js:
console.log("name: " + window.name + "
" + "window.vanishing_global: " + window.vanishing_global + "
typeof window.vanishing_global: " + typeof window.vanishing_global + "
document.foobar: " + document.foobar);
Instructions:
Put these two files into a directory, and open the HTML in a browser (tested in latest Chrome and Firefox, same result in both).
This is the output I get:
this == document: false
this == doc: true
_doc == document: true
_doc == doc: false
name: foobar
window.vanishing_global: 1366037771608
typeof window.vanishing_global: number
document.foobar: barfoo:0.9013048021588475
name:
window.vanishing_global: undefined
typeof window.vanishing_global: undefined
document.foobar: foobar:0.5015988759696484
The this object inside the handler should be either the document object. It is a document object, but not the same document object as the document that it runs inside (it's also not the same as the parent document). The window object inside the handler is also not the same as the window object that runs in JavaScript loaded in the page.
So finally my question:
Does anyone know what's going on, and how I can either get a reference to the actual window object, or at least declare and reference global variable from the same global context?
Footnotes:
There are no cross-domain issues with this iframe since they're on the same domain. There is an issue if someone sets document.domain, but that's not being done in this example code.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
