Getting parent value in an iframe?

Question

I have below two html files. In PassValueIFrame.html i have an iframe which refers inputForm.html. Also, i have one hidden field in PassValueIFrame.html and am trying to retrieve its value in inputForm.html but am not getting its value it alerts as 'undefined'. Am i doing any wrong here? Please help me.

PassValueIFrame.html

<html>
  <head>
  <title>IFrame Example</title>
  </head>
<body>
<input type="hidden" class="Language" value="English">
<iframe name="iframe" id="iframe_id" src="inputForm.html" height="150" >
</iframe>
</body>
</html>

inputForm.html

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script language="javascript">
  $(document).ready(function() {
    alert($(this).parent().find('.Language').html());
  });

  </script>
   <title>IFrame Child Example</title>
</head>
<body>
<h1> Iframeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </h1>
</body>

Thanks!

I guess this will help you: http://stackoverflow.com/q/935127/1420197 — Ionică Bizău, Aug 05 '13 at 06:27

score 11 · Accepted Answer · answered Aug 05 '13 at 06:28

11

<input id="myInput" type="hidden" class="Language" value="English">

$("#myInput", window.parent.document).val();

answered Aug 05 '13 at 06:28

Abhitalks

27,721
5
58
81

Alex · Answer 2 · 2013-08-05T06:33:55.347

3

Try this:

alert(parent.document.getElementsByClassName("Language")[0].value);

or add id (for example languageId) to the hidden element and try

alert(parent.document.getElementById("languageId").value);

edited Aug 05 '13 at 06:33

answered Aug 05 '13 at 06:27

Alex

11,451
6
37
52

score 0 · Answer 3 · answered Aug 05 '13 at 06:41

Another thing you can do is define a function in the parent window and call it from the iframe:

inputForm.html

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script language="javascript">
        $(document).ready(function() {
            window.parent.parent_function("Papa!");
        });
    </script>
    <title>IFrame Child Example</title>
</head>
<body>
    <h1> Iframeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </h1>
</body>
</html>

PassValueIFrame.html

<html>
    <head>
    <title>IFrame Example</title>
    <script>
        function parent_function(str) {
            window.alert(str);
        }
    </script>
</head>
<body>
    <input type="hidden" class="Language" value="English">
    <iframe name="iframe" id="iframe_id" src="inputForm.html" height="150" >
    </iframe>
</body>
</html>

Getting parent value in an iframe?

PassValueIFrame.html

inputForm.html

3 Answers3

inputForm.html

PassValueIFrame.html