资讯专栏INFORMATION COLUMN

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

YanceyOfficial / 296人阅读

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

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

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

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

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

相关文章

  • 那些年曾谈起跨域

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

    galois 评论0 收藏0
  • Web开发跨域跨域资源共享

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

    Eastboat 评论0 收藏0
  • 利用html5postmessage解决iframe跨域问题库cross-domain.js,使

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

    I_Am 评论0 收藏0

发表评论

0条评论

YanceyOfficial

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<