Hii,
I am providing a very simple javascript code by which we can access variables and invoke functions in the parent document and vice-versa.
Please go through the given example below and understand the concept.I hope it will be useful.
*{ margin: 0;padding: 0px;box-sizing:border-box; }
.clr:after{content: "";clear: both;display: block;}
body{font-family: Arial;}
iframe{width:768px;margin:0 auto;}
div {width: 32.3%;float: left;margin:0 15px;}
div h3{color: #202628;padding: 50px 0 20px 0;}
div form{background-color:#3C3B37;border-radius: 5px;padding: 25px 15px 25px;float: left;}
div form > p{color:#fff;line-height: 10px;line-height: 25px;}
div form > input{border: 1px solid #fff;border-radius: 20px;padding: 15px;width: 350px;color: #9FAAAD;margin: 10px 0;float: left;}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="IFRAMECONCEPT.css">
</head>
<body>
<header>
<form id="parentForm">
<input type="text" id="changeName" value="">
</form>
</header>
<section><iframe src="IFRAME.html" width="50%" height="50%" id="iframe"></iframe>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="IFRAMECONCEPT.css">
</head>
<body>
<form id="childForm" action="#">
<input type="text" id="nameChange" name="display">
<button type="submit" onclick="newText()">click to send data from child to parent</button>
<button type="submit" onclick="newTextSecond()">click to send data from parent to child</button>
</form>
<script>
function newText() {
parent.document.getElementById('changeName').value = document.getElementById('nameChange').value;
}
function newTextSecond() {
document.getElementById('childForm').display.value = parent.document.forms['parentForm'].elements['changeName'].value;
}
</script>
</body>
</html>
0 Comment(s)