How to pass value from parent to its iframe using javascript

Question

Hi i want to pass the value by calling the parent link page value to its iframe link page sample code is

<html>
    <head>
        <title>
        </title>
        <script>
            function sendvalue(v){
                alert(v);
            }
        </script>
    </head>
    <body>
        <form id="f">
            <input type="button" value="123" onclick="sendvalue(this.value)">
        </form>
        <iframe id="frame1" src="a.html" width="500px;"></iframe>
    </body>
</html>

a.html

<html>
    <head>
        <title>
        </title>
        <script>

        </script>
    </head>
    <body>
        <h3> Frame</h3>
        <form id="myform">
            Req value <input type="text" name="a" id="a">
        </form>
    </body>
</html>

when i call sendvalue function then the value should pass to iframe link page in form for input field. how this can be achieved.

Possible duplicate of stackoverflow.com/questions/935127/… — Mattia Galati
– Mattia Galati, Commented Apr 11, 2017 at 11:10

Miro · Accepted Answer · 2019-11-14 10:25:32Z

3

You can use postMessage in order to communicate between 2 iframe.

On the parent frame you need to grab the iframe's window with iframeEl.contentWindow.postMessage(value as a string, can be json.stringified value)

On the child frame you need to add event of type message, something like that:

window.addEventListener('message', function(dataPassed) {
   //Your logic here.
})

For more info read that

edited Nov 14, 2019 at 10:25

Miro

8,7104 gold badges40 silver badges75 bronze badges

answered Sep 13, 2017 at 5:07

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vijay kumar · Accepted Answer · 2017-04-11 11:51:35Z

0

<html>
<head>
<title>
</title>
<script>
function sendvalue(v){
document.getElementById('va').value = v;
window.frames['framename'].document.getElementById("a").value = v


}
</script>
</head>
<body>
<form id="f">
 <input type="button" value="123" onclick="sendvalue(this.value)">
 <input type="text" name="va" id="va">
</form>
<iframe  name="framename" src="a.html" width="500px;"></iframe>
</body>
</html>

a.html

<html>
<head>
<title>
</title>
</head>
<body>
<h3> Frame</h3>
<form id="myform">
Req value <input type="text" name="a" id="a">
</form>
</body>
</html>

answered Apr 11, 2017 at 11:51

vijay kumar

3873 gold badges12 silver badges31 bronze badges

Comments

Vladi · Accepted Answer · 2017-09-12 21:24:42Z

0

The Best way it to add to you Iframe

<iframe id="frame1" src="a.html?data=SomeData" width="500px;"></iframe>

and inside the iframe you can get the information by making varible

var MYDATA = location.href.split('=')[1].split('&');

(you will see that MYDATA=SomeData)

answered Sep 12, 2017 at 21:24

Vladi

2,03823 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to pass value from parent to its iframe using javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related