前端解决跨域问题的N种方法之postMessage

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端解决跨域问题的N种方法之postMessage相关的知识,希望对你有一定的参考价值。

平时会不会有一个需求是 我在打开不同域网站的时候 要把我的某个变量数据传递过去 方法有很多很多种 今天介绍下postMessage

H5 postMessage

语法

otherWindow.postMessage(message, targetOrigin);
otherWindow
  • 其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames

参数(message, targetOrigin)
  • message: 将要发送到其他
    window的数据。将会被结构化克隆算法序列化。这意味着你可不受什么限制的安全传送数据对象给目标窗口而无需自己序列化

  • targetOrigin:(MDN上的解释比较长,简而言之)字符串参数,指明目标窗口的源

看下例子

技术图片

aaa.html

技术图片

bbb.html

技术图片

看一下打印出来的e的内容

技术图片

相对重要属性如下

  • data:是传递来的message

  • source:发送消息的窗口对象

  • origin:发送消息窗口的源(协议+主机+端口号)

附上我的订阅号二维码,欢迎关注,一起学前端

技术图片

以上是关于前端解决跨域问题的N种方法之postMessage的主要内容,如果未能解决你的问题,请参考以下文章

如何处理前端js跨域问题

H5之postMessage

postMessage解决跨域问题

关于前端如何解决跨域问题

请求接口时跨域问题,前端解决方法

前端常见跨域解决方案