0

I want to access a variable in iframe from parent index.html.

The index.html:

<!doctype html>
<html lang="en-us">
  <head>
    <title>Test</title>
  </head>
  <body>
  <p>Test</p>
  <div>
  <iframe name="myIframe" id="test1" src="index2.html" width="100px" height="100px"></iframe>
  </div>
  <div>
    <script type="text/javascript">
        var clickParent = document.getElementById("test1").contentDocument.clicks;
        function onClickP() {
            console.log("click on parent: " + clickParent);
        };
    </script>
    <button type="button" onClick="onClickP()">Click Parent Button</button>
  </div>
  </body>
</html>

The iframe index2.html:

<!doctype html>
<html>
<head>
    <title>Clicks</title>
</head>

<body>
    <script type="text/javascript">
    var clicks = 0;
    function onClick() {
        clicks += 1;
        console.log("click counts: " + clicks)
    };
    </script>
    <button type="button" onClick="onClick()">Click Child Button</button>
</body>
</html>

In the console, the variable clickParent is "undefined". How to fix this and make the variable clickParent = clicks?

This question is not a duplicate of Sharing global javascript variable of a page with an iframe within that page because it is the opposite. I want to access the iframe's variable from the parent, not access parent's variable from the child. My Question, the variable that parent accesses from iframe is "undefined".

Any answers would be appreciated. Thank you.

Community
  • 1
  • 1
Hendri Tobing
  • 351
  • 5
  • 14
  • [This](http://stackoverflow.com/questions/1451208/access-iframe-elements-in-javascript) may help. – Hang Mar 26 '16 at 00:41
  • Possible duplicate of [Sharing global javascript variable of a page with an iframe within that page](http://stackoverflow.com/questions/7647042/sharing-global-javascript-variable-of-a-page-with-an-iframe-within-that-page) – Dexter Mar 26 '16 at 00:47
  • @Hang, thank you for the link. I have tried to change var clickParent = window.frames['test1'].document.getElementById('clicks').value; but It is still 'undefined'. – Hendri Tobing Mar 26 '16 at 01:11
  • The reason I was considering it duplicate is because it's considered good practice to define global variables in the parent. But it's up to the moderators anyway. I'll remove my duplicate suggestion if possible. – Dexter Mar 26 '16 at 18:28

2 Answers2

2

Possibly a duplicate of this.

Declare global variables in the parent and set them in the iframe document using parent.var_name.

You can also access child vars by creating an object for the child document:

child_iframe = document.getElementById("iframe_id").contentWindow;
alert(child_iframe.var_name);
Community
  • 1
  • 1
Dexter
  • 795
  • 2
  • 13
  • 27
  • thank you very much for the answer and also the link. I tried your suggestion, but the variable (child_iframe.clicks) on the parent is still 'undefined'. – Hendri Tobing Mar 26 '16 at 01:18
  • Are your parent document and your iframe document stored on the same domain? – Dexter Mar 26 '16 at 02:31
  • Yes, Dexter. I have found the answer. I have to define the variable parentClick first before the function is loaded, for example parentClick=0. Then everything works like a charm. Thank you Dexter and Hang. – Hendri Tobing Mar 26 '16 at 02:55
  • That's actually what I meant by declaring it in the parent document. You're welcome! – Dexter Mar 26 '16 at 03:00
0

In my case, I was using the window.name on the parent. For accessing that on iFrame, I was using window.parent.name.

hjhk19
  • 39
  • 1
  • 2
  • 7
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 28 '22 at 08:22