使用postMessage给父子页面传值，可以解决跨域问题
父传子：iframe.contentWindow.postMessage()子传父：尽量放在window.onload里面。window.parent.postMessage()接收数据：window.addEventListener(‘message’, event => {})
遇到的问题：
子页面中有登录，保存了cookie，但是谷歌浏览器的iframe中并不能成功取到。
解决方案：
1. 使用https协议2. 保存cookie的时候修改设置：SameSite和Secure this.$cookies.set('token', res.data.auth_token, null, null, null, true, 'None');
父级
（vue项目）
<iframe id="myIframe" :src="iframeUrl + '/test.html'" width="80%" height="60%" style="position: absolute;top: 0;left: 0;"></iframe>data() {return {iframeUrl : 'http://127.0.0.1:5500'}},mounted() {this.iframe = document.getElementById('myIframe').contentWindow;window.addEventListener('message', this.getChildMsg, false);},methods: {getChildMsg() {if (event.origin == this.iframeUrl) { // 校验一下来源console.log('父页面获取到信息是：' + event.data);}},// 点击传值给子页面sendToChild() {this.iframe.postMessage('父级点击了xx，传给子页面xx', this.iframeUrl); // 第二个参数可是具体域名或*（传递给所有的窗口）}}
子页面
（child.html）
<button id="btn" data-id="id1">点击传给父组件</button><script>window.onload = () => {// console.log('onload加载完了');document.getElementById('btn').addEventListener('click', params => {window.parent.postMessage('子页面点击按钮的id是' + params.target.dataset.id, '*');});};window.addEventListener('message', function (event) {if (event.origin == 父页面域名) {console.log('子页面获取到的信息是：' + event.data);}});</script>
结果：
谷歌浏览器 iframe中设置cookie的参考：/ysyysjbama/article/details/108061969?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allsobaiduend~default-3-108061969.nonecase&utm_term=iframe%E4%B8%8D%E8%83%BD%E8%AE%BE%E7%BD%AEcookie&spm=1000.2123.3001.4430
