html的postmessage使用历程

最近在搞自定义表单开发，有一个需求是一个标签页里的vue端提交数据后刷新另一个标签页里父页面的layui的列表。

百度查了一下发现window的localStorage可以完成标签页之间的数据传递。选定后开始编码，在父页面js端添加window.addEventListener("storage",function)，用来监听localstorage数据变化、触发function；在子页面vue端，更新window.localstorage、setItem，代码编写完，开始测试，发现不起作用。调试发现两个window都不一致，于是百度之，发现确实是不行，因为我这个是跨域了，而localstorage不支持跨域传值。https://majing.io/posts/10000011511208 就是这个帖子提醒了我。

于是转向postmessage。https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

看了官网上的例子，想象的是先由父页面向子界面传数据，在数据传输成功后返回结果，先做测试，测试结果发现，父页面发送的数据子界面可以收到，但是子界面回复的数据父页面无法收到。反复检查是否写法有误，但检查没有问题，将target地址写死指定都无法传值，于是先放下解决其他问题去了。

晚上有时间，又看了一下，尝试直接在子界面向父页面post值。使用window.postmessage接收不到，使用window.parent.postmessage依然收不到，最后发现我们调用时的写法是window.open，于是查了一下window.open获取父页面对象的方法，查到使用window.opener即可取到对象，于是直接使用window.opener.postmessage发送数据，父页面成功接收数据，问题解决！！！