对于跨域我们有很多的解决方案,今天我来分享一下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. PHP实现无限极分类的两种方式,递归和引用

    面试的时候被问到无限极分类的设计和实现,比较常见的做法是在建表的时候,增加一个PID字段用来区别自己所属的分类 $array = array( array('id' => 1, 'pid' =& ...

  2. 书.Windows网络与通信程序设计

    1.PDF&源码 保存到了 我的网盘fivez79513-->"PDF&源码" 目录中 “Windows网络与通信程序设计(第2版) 完整带书签PDF+源码. ...

  3. 洛谷 题解 P1908 【逆序对】

    一开始竟然妄想用\(n^2\)的算法过这题,然而这是不可能的 所以只好写归并排序来求逆序対惹 比如将下面两个区间排序 3 4 7 9 1 5 8 10 首先将右区间的\(1\)取出,放到\(r_k\) ...

  4. ROS学习(二)运行keyboard

    1.ssh连接机器人 ./dora*.sh 启动roscore,相当于启动ros系统 roscore 2.另启终端,也就意味着重新ssh连接机器人, ./dora*.sh 运行wheel驱动 rosr ...

  5. airflow删除dag不在页面显示

    当我们需要把dag删除的时候,遇到了删除了相应的dag文件,但页面还是显示 这个时候需要重启airflow 的webserver  ps -ef|egrep  rm -rf /home/airflow ...

  6. canvas与svg的区别

    1.历史: canvas是html5提供的新元素. 而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或 ...

  7. Java中的静态导入

    Java从1.5开始,增加了静态导入的语法,静态导入使用import static语句,分为两种: 导入指定类的某个静态成员变量.方法. 导入指定类的全部的静态成员变量.方法. 下面是代码演示: /* ...

  8. [DEBUG] ubuntu pip安装成功却无法import

    我的pip经常出问题,我也不知道为啥..今天搞啥啥坏=.= 问题: pip自动安装显示成功,在交互环境下却无法import ==========================踩坑========== ...

  9. Python--读取数据库

    原文地址:https://www.wukong.com/answer/6591280609824342286/?iid=40708017633&app=news_article&sha ...

  10. Python 【文件的读写】

    文件读写 A 读取文件 读文件三步:开——读——关.file1 = open('/Users/Ted/Desktop/test/abc.txt','r',encoding='utf-8')第一个参数是 ...