码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-05-20 20:10:54      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:tor   一起学前端   tps   执行   技术   对象   一起学   打印   安全   

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

标签:tor   一起学前端   tps   执行   技术   对象   一起学   打印   安全   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12925656.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!