Declare and initialize global variable in iframe scope using Javascript (same domain)
Question
Several questions have been asked about how to access a global variable in an iframe. I'd like to know how to declare and initialize a global variable in an iframe's scope from the parent. I know I can access the variable from the iframe using document.myGlobalVariable , but I'd like to be able to reference it just by saying myGlobalVariable , without document. in the front.
Here's my HTML:
<html>
<head>...</head>
<body>
...
<iframe src="myFrame.html"></iframe>
<script type="text/javascript">
var iframe = document.querySelector('iframe');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.myGlobalVariable = "Hello";
</script>
</body>
</html>
myFrame.html
<html>
<body>
...
<script type="text/javascript">
// wait for document to load so parent script can finish running
$(function() {
console.log(document.myGlobalVariable); // <-- This works
console.log(myGlobalVariable); // <-- But this doesn't (and I want this one)
});
</script>
</body>
</html>
Thanks!
2 answers
solution1
2 2016-12-15 12:52:33
You have 3 problems.
- You aren't waiting for the document in the iframe to load before you try to modify its DOM
- You aren't waiting for the property to be set before trying to read it
- You are setting the property on the
documentbut are trying to read it from thewindow
So:
<html>
<head>...</head>
<body>
...
<iframe src="myFrame.html"></iframe>
<script type="text/javascript">
var iframe = document.querySelector('iframe');
iframe.addEventListener("load", function () {
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.myGlobalVariable = "Hello";
});
</script>
</body>
</html>
and
<html>
<body>
...
<script type="text/javascript">
setInterval(function () {
console.log(document.myGlobalVariable);
}, 1000);
</script>
</body>
</html>
solution2
0 ACCPTED 2016-12-15 15:49:59
Answering my own question:
I was attempting to add the variable to the document scope like this:
iframe.contentDocument.myGlobalVariable = "Hello";
But adding it to the document scope means that, in order to reference the variable from within the JS of the iframe, you must append document. to the front of the variable: document.myGlobalVariable .
But as my question states, I wanted to be able to reference it by just the variable name: myGlobalVariable .
To do that, you simply need to add it to the window scope instead:
iframe.contentWindow.myGlobalVariable = "Hello";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.