1.父页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<button onclick="fatherSay()">父页面喊儿子</button>
<input type="hidden" name="father" id="father" value="嗨,我是爸爸--如果儿子喊我我就出现!" />
<iframe src="./子.html" id="childGFrame"></iframe>
</body>
<script type="text/javascript">
function fatherSay2() {
console.log('父页面被调用了!');
};
function fatherSay() {
var kid = document.getElementById("childGFrame").contentWindow;
var val = kid.document.getElementById('child').value;
kid.childSay2();
console.log(val);
console.log('-----------------父调用子页面------------')
};
var fa = '我是fa';
</script>
</html>
2.子页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<button onclick="childSay()">子页面呼叫父亲</button>
<input type="hidden" name="child" id="child" value="我是儿子--如果父亲喊我我就出现!" />
</body>
<script type="text/javascript">
function childSay() {
console.log(parent.fa)//父页面的全局变量
console.log(parent.$('#father').val())//父页面输入框的值
parent.fatherSay2();
console.log('-----------------子调用父页面------------')
};
function childSay2() {
console.log('子页面被调用了!')//父页面的全局变量
};
var ch = '我是ch';
</script>
</html>