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

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

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

<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>

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

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)

Collectives™ on Stack Overflow

How to pass value from parent to its iframe using javascript

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related