iframe 父子页面传值 postMessage

最新推荐文章于 2024-07-31 17:57:41 发布

ZoeLinJF

最新推荐文章于 2024-07-31 17:57:41 发布

阅读量1.4k

点赞数

分类专栏： js vue 文章标签： vue javascript postMessage iframe传值 iframe跨域通信

本文链接：https://blog.csdn.net/ZoeLinJF/article/details/110118456

版权

js 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue

16 篇文章 0 订阅

订阅专栏

使用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的参考：https://blog.csdn.net/ysyysjbama/article/details/108061969?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduend~default-3-108061969.nonecase&utm_term=iframe%E4%B8%8D%E8%83%BD%E8%AE%BE%E7%BD%AEcookie&spm=1000.2123.3001.4430