文档章节

关于postMessage跨域(html5、h5转别人)

leona_lily
 leona_lily
发布于 2015/04/03 16:18
字数 533
阅读 66
收藏 1
点赞 0
评论 0

postMessage是html5新增的方法,主要用来解决跨域通信的问题,用法很简单,只需要在页面获得另一个页面的window( 如iframe引入的页面 ),就可以调用postMessage方法将数据传送过去,接收的页面只需要监听message事件,就可以获取到数据,从而进行操作。就是这样而已,下 面给出一个例子,看代码会更加清晰。

 page1.html


<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
   <meta charset="gb2312">
   <title></title>
</head>
<body>
   <iframe src="http://192.168.50.122/2013/page1.html" id="ifr"></iframe>
   <br />
   <input type="text" id="txt" />
   <input type="button" id="btn" value="向子页面发送内容" />
    
<script type="text/javascript">
var addEvent = function( ele, type, fnHandler ){
     return ele.addEventListener ? ele.addEventListener(type,fnHandler,false) : ele.attachEvent('on' + type,fnHandler);
},
receive = function( e ){
    var div = document.createElement( 'div' );
    div.innerHTML = e.data; //postMessage过来的数据都在e对象里,可以输出e查看相应属性
    document.body.appendChild( div );
}
    
//绑定message事件接收数据
addEvent( window, 'message', receive );
    
/* 上面的为接收子iframe发送过来的数据,下面的为向子iframe发送数据 */
    
var ifr = document.getElementById( 'ifr' ),
    txt = document.getElementById( 'txt' ),
    btn = document.getElementById( 'btn' );
    
btn.onclick = function(){
    var value = txt.value;
    
    ifr.contentWindow.postMessage( value, '*' );
    
    txt.value = '';
}
    
</script>
</body>
</html>
page2.html

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
   <meta charset="gb2312">
   <title></title>
</head>
<body>
    <strong>这是子页面</strong>
   <input type="text" id="txt" />
   <input type="button" id="btn" value="向父页面发送内容" />
   <div id="content"></div>
    
<script type="text/javascript">
var addEvent = function( ele, type, fnHandler ){
     return ele.addEventListener ? ele.addEventListener(type,fnHandler,false) : ele.attachEvent('on' + type,fnHandler);
},
receive = function( e ){
    var div = document.createElement( 'div' );
    div.innerHTML = e.data; //postMessage过来的数据都在e对象里,可以输出e查看相应属性
    document.body.appendChild( div );
}
    
//绑定message事件接收数据
addEvent( window, 'message', receive );
    
/* 上面的为接收子iframe发送过来的数据,下面的为向子iframe发送数据 */
    
var ifr = document.getElementById( 'ifr' ),
   txt = document.getElementById( 'txt' ),
   btn = document.getElementById( 'btn' );
    
btn.onclick = function(){
   var value = txt.value;
    
   window.top.postMessage( value, '*' );
    
   txt.value = '';
}
</script>
</body>
</html>



其实只需要看一个页面的代码就能了解全部了,只是为了例子完整性将其全部展示出来了。

可以直接复制上面代码保存在两个页面里做测试,注意自己模拟跨域环境,如改hosts。


本文转载自:https://developer.mozilla.org/zh-CN/docs/DOM/window.postMessage

共有 人打赏支持
leona_lily
粉丝 9
博文 91
码字总数 37848
作品 0
朝阳
程序员
奇舞周刊第 255 期:VS Code 和 Atom 背后的奇技淫巧

记得点击文章末尾的“阅读原文”查看哟~ 下面先一起看下本期周刊摘要吧~ 又到周五,为您奉上第 255 期奇舞周刊~ (by @Adam Grason) 奇舞推荐 ■ ■ ■ 用代码生成 Glitch Art 风格的抖音字体...

奇舞周刊 ⋅ 04/20 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

Android WebView 的三种使用方式

关于原生开发好,还是混合模式开发好,还是 套壳的方式好,在这里不是重点,没有最好的,只有相对适合的。重点是 那种方式 以最低的资源代价 适合你的业务场景,适合你的团队,根据实际情况来...

zhaiguangtao ⋅ 2016/12/14 ⋅ 0

前端JavaScript实现跨域的方式(转)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,...

easonjim ⋅ 2017/12/27 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

阿里巴巴一面总结

阿里巴巴一面总结 看到浙江来电简直是手都颤抖起来了,激动 在腾讯做些什么 我主要是讲了做腾讯云控制台的一些东西。 问:我主要用了什么技术 答:用新旧两个模块,新的模块使用的是react+r...

sunshinewyf ⋅ 2016/09/25 ⋅ 0

IE8的Strong HTML5 support

印象中IE8是不支持HTML5的,后来零零碎碎看到部分HTML5支持,今天特意归档一下,看看IE8到底支持多少HTML5, stackoverflow上有人说,IE8在当年发布时,Microsoft承诺:With full CSS 2.1, ...

hell0cat ⋅ 2013/04/25 ⋅ 0

localhot本地储存刷新本地数据还在的问题

H5的两种存储技术的最大区别就是生命周期。 1. localStorage是本地存储,存储期限不限; 2. sessionStorage会话存储,页面关闭数据就会丢失。 使用方法: localStorage.setItem(“key”,“...

sinat_39430615 ⋅ 2017/10/13 ⋅ 0

HTML5 消息队列PostMessage和 onMessage方法使用

------------------------------------------------------------- 以上是2个简单的例子,有postMessage的第二个参数可知,这类消息是可以跨域的,因此完全可以结合 Ajax进行跨域提交,在这里不...

IamOkay ⋅ 2014/11/07 ⋅ 0

H5本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可...

刘梓航 ⋅ 2014/10/27 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JDK1.6和JDK1.7中,Collections.sort的区别,

背景 最近,项目正在集成测试阶段,项目在服务器上运行了一段时间,点击表格的列进行排序的时候,有的列排序正常,有的列在排序的时候,在后台会抛出如下异常,查询到不到数据,而且在另外一...

tsmyk0715 ⋅ 21分钟前 ⋅ 0

spring RESTful

spring RESTful官方文档:http://spring.io/guides/gs/rest-service/ 1. 可以这么去理解RESTful:其实就是web对外提供的一种基于URL、URI的资源供给服务。不是一个原理性知识点。是一个方法论...

BobwithB ⋅ 23分钟前 ⋅ 0

C++ 中命名空间的 5 个常见用法

相信小伙伴们对C++已经非常熟悉,但是对命名空间经常使用到的地方还不是很明白,这篇文章就针对命名空间这一块做了一个叙述。 命名空间在1995年被引入到 c++ 标准中,通常是这样定义的: 命名...

柳猫 ⋅ 25分钟前 ⋅ 0

@Conditional派生注解

@Conditional派生注解(Spring注解版原生的@Conditional作用) 作用:必须是@Conditional指定的条件成立,才给容器中添加组件,配置配里面的所有内容才生效; @Conditional扩展注解 作用(判...

小致dad ⋅ 26分钟前 ⋅ 0

适配器模式

适配器模式 对象适配器 通过私有属性来实现的类适配器 通过继承来实现的接口适配器 通过继承一个默认实现的类实现的

Cobbage ⋅ 30分钟前 ⋅ 0

Java 限流策略

概要 在大数据量高并发访问时,经常会出现服务或接口面对暴涨的请求而不可用的情况,甚至引发连锁反映导致整个系统崩溃。此时你需要使用的技术手段之一就是限流,当请求达到一定的并发数或速...

轨迹_ ⋅ 34分钟前 ⋅ 0

GridView和子View之间的间隙

默认的情况下GridView和子View之间会有一个间隙,原因是GridView为了在子View被选中时在子View周围显示一个框。去掉的办法如下: android:listSelector="#0000" 或 setSelector(new ColorDra...

国仔饼 ⋅ 37分钟前 ⋅ 0

idea插件开发

1 刷新页面要使用多线程 2 调试要使用restart bug 不要去关闭调试的idea 否则再次启动会卡住

林伟琨 ⋅ 37分钟前 ⋅ 0

Java 内存模型

物理机并发处理方案 绝大多数计算任务,并不是单纯依赖 cpu 的计算完成,不可避免需要与内存交互,获取数据。内存要拿到数据,需要和硬盘发生 I/O 操作。计算机存储设备与 cpu 之间的处理速度...

长安一梦 ⋅ 44分钟前 ⋅ 0

思路分析 如何通过反射 给 bean entity 对象 的List 集合属性赋值?

其实 这块 大家 去 看 springmvc 源码 肯定可以找到实现办法。 因为 spirngmvc 的方法 是可以 为 对象 参数里面的 list 属性赋值的。 我也没有看 具体的 mvc 源码实现,我这里只是 写一个 简...

之渊 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部