对于跨域我们有很多的解决方案,今天我来分享一下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. [转]NopCommerce中的多商店支持:权威指南

    [转]NopCommerce中的多商店支持:权威指南 多商店支持是最强大的nopCommerce功能之一.但究竟什么是多店支持?它是谁的?如何在nopCommerce中设置多个商店?在今天的帖子中,我 ...

  2. Burpsuite—渗透测试神器

    Google浏览器插件---SwitchyOmega Firefox浏览器插件---SwitchyOmega hosts代理工具---SwitchHosts[右击使用管理员权限打开] 双击burp-l ...

  3. Sping 补充完成修改功能

    1.视图层完整示例 <form action="#" th:action="@{/update/{id}(id=${user.id})}" th:obje ...

  4. VSCode 查看、还原本地代码历史版本

    参考链接:https://blog.csdn.net/luckystar_99/article/details/100583141

  5. 【转】JS大总结(带实例)

    JS大总结(带实例) JavaScript事务查询综合click() 对象.click() 使对象被点击.closed 对象.closed 对象窗口是否已封闭true/falseclearTimeou ...

  6. C语言获取当前系统时间

    原文链接:https://blog.csdn.net/yuec1998/article/details/79883318 #include<stdio.h>#include<time ...

  7. 什么是H5?

    总听到很多人说H5,现在H5很火,到底H5是什么,以下发表个人对H5的理解. HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年. ...

  8. [转帖]详解shell脚本括号区别--$()、$「 」、$「 」 、$(()) 、「 」 、「[ 」]

    详解shell脚本括号区别--$().$「 」.$「 」 .$(()) .「 」 .「[ 」] 原创 波波说运维 2019-07-31 00:01:00 https://www.toutiao.com ...

  9. (十二)Sun公司的Jstl标签库详细介绍

    JSP 本身提供的标签很少,不能满足我们日常开发需要,好在 Sun 公司自己提供了一套标签库: JSTL标签库快速入门(可点击) 目录 < c : out > 标签 < c : se ...

  10. GCC 高版本7.4 编译链接 boost 报错 boost::thread::XXX’未定义的引用 解决方法

    背景:开发中的项目之前一直用GCC4.8,boost库1.48版本的开发环境.现在因业务需求,需要更换GCC7.4,boost库1.70. 问题:可以正常编译BOOST的链接库文件,但是链接时候报错. ...