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

YanceyOfficial 发布于2019-08-21 14:36 / 434人阅读

摘要：平时会不会有一个需求是我在打开不同域网站的时候要把我的某个变量数据传递过去方法有很多很多种今天介绍下语法其他窗口的一个引用，比如的属性执行返回的窗口对象或者是命名过或数值索引的参数将要发送到其他的数据。将会被结构化克隆算法序列化。

平时会不会有一个需求是我在打开不同域网站的时候要把我的某个变量数据传递过去方法有很多很多种今天介绍下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：发送消息窗口的源（协议+主机+端口号）

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

GPU云服务器云服务器解决问题的方法云服务器问题及解决方法在家赚钱的十种方法数据迁移的四种方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87964.html

那些年曾谈起的跨域

摘要：在中，在不同的域名下面进行数据交互，就会遇到跨域问题，说到跨域首先要从同源说起，浏览器为了提供一种安全的运行环境，各个浏览器厂商协定使用同源策略。在上面说过是不受同源策略限制的，但是出于安全原因，浏览器限制从脚本内发起的跨源请求。对于前端开发来说跨域应该是最不陌生的问题了，无论是开发过程中还是在面试过程中都是一个经常遇到的一个问题，在开发过程中遇到这个问题的话一般都是找后端同学去解决...

galois 2019-08-23 18:13 评论0 收藏0
Web开发之跨域与跨域资源共享

摘要：例外当涉及到同源策略时，有两个主要的例外授信范围两个相互之间高度互信的域名，如公司域名，不遵守同源策略的限制。端口未将端口号加入到同源策略的组成部分之中，因此和属于同源并且不受任何限制。原文链接：http://www.devsai.com/2016/11/24/talk-CORS/ 同源策略（same origin policy） 1995年，同源政策由 Netscape 公司引入浏...

Eastboat 2019-08-20 12:29 评论0 收藏0
利用html5的postmessage解决iframe跨域问题的库cross-domain.js，使

摘要：简介一个利用的跨域解决一个系统中，多个跨域通信交互的库。然而各系统采用了不同的域名，与主框架系统和其它业务系统有跨域问题若将所有域名改为同一域名下可能会产生一些系统间页面元素和样式的冲突故采用了标准下的来解决该问题。简介一个利用html5的跨域api postMessage解决一个系统中，多个iframe跨域通信交互的js库。 github地址：cross-domain 背景最...

I_Am 2019-08-22 18:25 评论0 收藏0