父页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>父亲-页面</h1>
<iframe id="myIframe" src="./son.html" width="600" height="400"></iframe>
<script>
window.onload = function(){
window.addEventListener('message',function(e){
console.log(e.data)
})
}
</script>
</body>
</html>
子页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>我是儿子页面--kkk</h2>
<button onclick="triggerParentEvent()">方法1：调用父亲页面</button>
<script>
function triggerParentEvent() {
window.parent.postMessage("I am xiaojin", "*");
}
</script>
</body>
</html>
