对于跨域我们有很多的解决方案,今天我来分享一下postMessage的那点事,postMessage是html5新增的一个解决跨域的一个方法,不过很可惜万恶的ie6,7不支持

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。听起来还是很牛掰的!!!

让我们慢慢的揭开postMessage的神秘面纱......

我们拿跨域中的iframe做例子

<script type="text/javascript">
window.parent.postMessage('hello world','*'); //在被嵌套的iframe的页面中写入这样一段代码
</script>

注意:postMessage的写法,postMessage之前写的是你要通信的window对象(也就是你要像谁通信),此时的window.parent的权限仅限于此,不能在像同域似的,进行获取父级的DOM元素,否则浏览器会报错,提示你不能进行跨域访问,我们再来看postMessage中所接收的参数,第一个参数就是你要像另外一个窗口传递的数据(只能传字符串类型),第二个参数表示目标窗口的源,协议+主机+端口号,是为了安全考虑,如果设置为“*”,则表示可以传递给任意窗口。

那么另外一个窗口是如何接收数据的呢

<script type="text/javascript">
window.addEventListener('message',function(e){
console.log(e.data); //hello world
console.log(e.origin); //http://127.0.0.1:8020 所传来数据的域
})
</script>

可以看到我们已经拿到了数据,那么拿到数据我们可以做那些操作呢

<script type="text/javascript">
window.addEventListener('message',function(e){
console.log(e.data); //hello world
if(e.data=="hello world"){
document.body.style.background = 'red';
}
})
</script>

哇哇。。。是不是很神奇,我们竟然间接的操作了DOM,改变了body的背景颜色,实际工作中操作什么就看你的需求了,这里只是抛砖引玉。

H5之postMessage的更多相关文章

  1. H5之postMessage 。实现跨域

    对于跨域我们有很多的解决方案,今天我来分享一下postMessage的那点事,postMessage是html5新增的一个解决跨域的一个方法,不过很可惜万恶的ie6,7不支持 postMessage( ...

  2. H5中用postMessage传递数据,解决localStorage不能跨域问题

    localStorage不能跨域,所以在A域名下用localStorage.YourKey方式存储的值,在B域名下是不能取到的. 所以需要转变思路,目前主要使用的两种方式: 一种方式:在A.B两个页面 ...

  3. 第三方页面嵌入到web项目的方案 之 使用iframe嵌入

    有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...

  4. 广告等第三方应用嵌入到web页面方案 之 使用iframe嵌入

    有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...

  5. [web] 前端一些细节

    作者:水落斜阳链接:https://www.jianshu.com/p/7a8124fdf945来源:简书著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1, reflow和re ...

  6. jwt单点登入

    主要有以下三步:   项目一开始我先封装了一个JWTHelper工具包(GitHub下载),主要提供了生成JWT.解析JWT以及校验JWT的方法,其他还有一些加密相关操作.工具包写好后我将打包上传到私 ...

  7. RN中webview的一些思考

    刚开始只是对接一下RN,h5部分,嵌套在RN里的webview里需要隐藏一些原生的按钮,遇到很多沟通上的问题,本来没使用RN之前,也是嵌套在webview里,也没什么问题,突然RN嵌套就有问题了,对方 ...

  8. H5 Notes:PostMessage Cross-Origin Communication

    Javascript中要实现跨域通信,主要有window.name,jsonp,document.domain,cors等方法.不过在H5中有一种新的方法postMessage可以安全实现跨域通信,并 ...

  9. H5新增的postMessage跨域解决方案Demo

    Demo背景:html中使用iframe嵌入了跨域的vue项目,在html中将参数传入到跨越的vue项目中. 向跨越的子窗口中发送数据 function sendMessage(data) { // ...

随机推荐

  1. 二十四 java 多线程一些知识点

    1:blocked线程和waiting的线程的区别? 如何唤醒? java线程中含有waiting与blocked两种状态: 线程的 blocked状态往往是无法进入同步方法/代码块来完成的(BLOC ...

  2. 【VS开发】【C++开发】const在函数前与函数后的区别

    const在函数前与函数后的区别 一   const基础           如果const关键字不涉及到指针,我们很好理解,下面是涉及到指针的情况:           int   b   =   ...

  3. STL源码剖析-学习笔记

    1.模板是一个公式或是蓝图,本身不是类或是函数,需进行实例化的过程.这个过程是在编译期完成的,编译器根据传递的实参,推断出形参的类型,从而实例化相应的函数 2. 后续补充-.

  4. zookeeper 操作命令

    简介 查阅了网上相关资料,介绍zookeeper客户端命令并不是非常全面,大多数都是简单介绍ls.get.set.delete.stat这几个简单命令的,下面我把help中的所有命令简单介绍一下以供参 ...

  5. Python练手项目:20行爬取全王者全英雄皮肤

    引言    王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了.我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成. ...

  6. 【牛客网】Idol Master

    [牛客网]Idol Master 也是一道网络流解线性规划 不过需要从小于号的那边解 限制是\(a \leq \sum_{i = 1}^{k} x_{i}\leq b\) 其中\(0 \leq x_{ ...

  7. EasyUI 对话框弹出文件输入框

    目前用的EasyUI的dialog,要实现弹出文件输入框(或者其他输入框和对话框),我的实现方案是,首先写一个close的div,然后里面就是样式和输入框的一些代码和一个确定按钮,然后页面上一个按钮, ...

  8. jenkins sonarqube 代码检测

    #jenkins插件: SonarQube Scanner #Jenkins配置 Task to run:scan #Analysis properties: sonar.projectKey=ser ...

  9. Idea生成的的第一个eureka注册中心服务器

    操作: 1.file->new->project     Spring Initializer ->default         点击next 2.输入     Group     ...

  10. 利用Python进行数据分析_Numpy_基础_3

    通用函数:快速的元素级数组函数 通用函数,是指对数组中的数据执行元素级运算的函数:接受一个或多个标量值,并产生一个或多个标量值. sqrt 求平方根 np.sqrt(arr) exp 计算各元素指数 ...