父子页面通信
该文简单介绍一下父子页面通信需要用到的方法和插件,以及自己在实践过程中所踩到的坑
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