Vue进阶八十六):VUE中iframe结合window.postMessage实现跨域通信

网友投稿 1030 2022-05-30

什么是iframe?

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

什么是postMessage?

window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。

使用场景:

在一个项目的页面中嵌入另一个项目的页面,需要实现父子,子父页面的通信。

1.嵌入页面

iframe使用如下(端口为8080):

methods: { handleMessage (event) { const data = event.data.data if(data.code === "success"){ alert(data.test) } } } mounted() { window.addEventListener('message', this.handleMessage); this.iframeWin = this.$refs.iframe.contentWindow; },

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

一、父页面向子页面传值

父页面代码:

sendMessage () { // 外部vue向iframe内部传数据 this.iframeWin.postMessage({ cmd: 'success', data: "我是来自父页面的data!" }, '*')

1

2

3

4

5

Vue进阶(八十六):VUE中iframe结合window.postMessage实现跨域通信

6

子页面监听同理。

Vue

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:实用又惊艳的Vue
下一篇:Python进阶(五十三)-Flask Web开发实现将表单渲染成HTML
相关文章