父子页面通信
该文简单介绍一下父子页面通信需要用到的方法和插件，以及自己在实践过程中所踩到的坑
postMessage
语法：target.postMessage(message, targetOrigin, [transfer]);
- target：其他窗口的引用
- message：传递给其他window的变量
- targetOrigin：能接收到消息事件的窗口，其值可以是*（表示无限制）或者一个 URI
target为需要传值的目标html文件对象，可以为经赋值过的变量
targetOrigin引号里就写星号就好（方便起见）
//给父页面传值
function openWin(){
message=window.document.getElementById('name').value
targetWin.postMessage(message,'*')
}
addEventListener
语法：element.addEventListener(event, function, useCapture)
- element：执行监听方法的对象
- event：监听的事件
- function：所监听事件触发时执行的函数
- useCapture：布尔值，指定事件是否在捕获或冒泡阶段执行
//监听子页面的数据
window.addEventListener('message',function(event){
alert(event.data)
})
一般是当前窗口需要接收数据，所以element一般为window；既然是传递参数event一般情况下为message（ps：message为window内置的一个事件），funtion为监听到事件后执行的函数，第三个参数我个人暂时用不到，没管他。
关键来了，你有想过post过来的参数从哪里接收吗？不知道你想没想过，反正我想了一天，最后发现通过funtion（）括号里的参数接受到的，并且这个参数他会自动封装成一个对象。由于怕麻烦，不想打开控制台，使用alert打印原生数据结果出来是个对象，把人给看愣了，纠结了半天不知道数据是否传输过来。
看也不知道哪里看他的属性，不知道是空的还是个啥，最后通过控制台打印，加上了data成功打印出对象中的属性。
VScode - 模拟本地服务器插件(Live Server)
千万不要幻想你把父子页面的Demo写好了他就顺利的通信起来了，直接运行两个Demo你的两个文件会存在跨域的问题，无法正常通信，解决方法是通过VScode插件栏下载一个Live Server插件
点击右下角的Go Live会弹出一个网站，通个这个网站启动你写的Demo，你的Demo就会处于同一个域下面了，就可以正常的进行通信了
代码实现
父页面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是父页面</title>
<script>
//需要用到的变量
var timer
var myWindow
//打开子页面
function openWin1(){
myWindow=window.open('2.html');
}
//监听子页面的数据
window.addEventListener('message',function(event){
alert(event.data)
})
//监听页面是否关闭
function showMessage(){
window.alert('子页面关闭了')
}
</script>
</head>
<body>
<input type="button" value="打开子页面" onclick="openWin1()" />
</body>
</html>
子页面代码如下：
<html>
<head>
<meta charset="utf-8">
<title>这是子页面</title>
<div class=”son“>
<div>从子页面输入参数
<input type="text" id='name' value="">
</div>
</div>
<script>
var targetWin=window.opener //父页面对象
var message
function closeWin(){
window.opener.close()
}
function openWin(){
message=window.document.getElementById('name').value
targetWin.postMessage(message,'*')
}
function winClose(){
window.opener.showMessage()
window.close()
}
</script>
</head>
<body>
<input type="button" value="我要关闭父页面" onclick="closeWin()" />
<input type="button" value="点我可以把子页面的数据传到父页面" onclick="openWin()" />
<input type="button" value="关闭子页面" onclick="winClose()">
</body>
</html>
新人小白，刚入前端坑，所述若有不对，还请路过大佬指正。
参考链接
[1] https://www.runoob.com/js/met-win-postmessage.html
[2] https://www.runoob.com/jsref/met-element-addeventlistener.html
[3] https://blog.csdn.net/weixin_44198965/article/details/99941435
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
