I am explaining you, how to pass value from iframe to parent end.
through iframe creates an inline frame in which we can put another page. We can send values from iframe to the parent page and parent to iframe side with the use of javascript code.
In this example I am sending value from iframe to the parent. I have created two html page one have iframe container (iframepage.html) and other (internal_iframe.html) have forms field like input box and send button. both page names are iframepage.html and internal_iframe.html.
in iframepage.html page function called testing() when user click on “Send” button click so it will send data to parent.
iframepage.html
<html>
<head>
<title>Iframe Page</title>
<script language="javascript">
function testing(value){
document.getElementById('showname').value=value;
}
</script>
</head>
<body>
<iframe name="iframes" id="iframeid" src="internal_iframe.html" height="400" width="600" >
</iframe>
<p>
Show Value from iframe: <input type="text" id="showname" ></p>
</body>
</html>
internal_iframe.html
<html>
<head>
<title>Internal Iframe</title>
</head>
<body>
<form name="formname">
<h1>Internal Iframe Form</h1>
<p>Caption : </p><input type="text" name="sender" id="input" value=""/>
<input type="button" onclick="parent.testing(this.form.sender.value);" value="Send" />
</form>
</body>
Output :
Hello, Welcome to webdeveloperindia.in. I am a full-stack web developer. Email – [email protected] | Skype – azaruddin23. I have knowledge of PHP, Laravel, Magento 1/2, Codeigniter, WordPress, Joomla, Shopify, Git, Bitbuket, jQuery, Ajax, Javascript and ReactJS.