文档章节

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

leona_lily
 leona_lily
发布于 2015/04/03 16:18
字数 533
阅读 69
收藏 1

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
博文 96
码字总数 37848
作品 0
朝阳
程序员
Ajax 浏览器跨域访问控制

jsonp+ajax实现浏览器跨域通信的原理解析 php+ajax+P3P实现多域名跨域登录 一.关于跨域需要设置的响应头消息 二.关于IE8和IE9浏览器差异性说明 IE8和IE9使用新的API XDomainRequest(IE又淘气...

IamOkay
2014/11/20
0
0
IE8的Strong HTML5 support

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

hell0cat
2013/04/25
0
0
postMessage的使用及BUG

postMessage的使用及BUG postMessage是html5的一个新功能,它是实现跨域通信的一种安全的策略,通过postMessage方式发送数据,通过在父子窗口添加onmessage事件进行监听,获取发送的数据,非...

dengjianqiang200
2012/10/23
0
1
如何设置iframe高度自适应,在跨域的情况下能做到吗?

  在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法。在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以...

恐空控
2013/09/01
0
1
HTML5编程之旅 第2站 Communication

HTML5 Communication 初探 本文主要探讨用于构建实时跨源通信的两个模块:跨文档消息通信(Cross Document Messaging)和XMLHttpRequestLevel2。通过这两个模块,我们可以构建不同域间进行安...

倪伟伟
2014/02/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

180.mariadb 主从复制

参考:https://blog.csdn.net/chengxuzaza/article/details/62042920 睡觉睡觉,明天写 1.效果 当主库中数据有变化的时候,从库就自动同步 2. 环境要求 至少两台 linux服务器 (教程:https...

Lucky_Me
8分钟前
0
0
erlng file id3v1 id3v1.1

%% ---%% Excerpted from "Programming Erlang",%% published by The Pragmatic Bookshelf.%% Copyrights apply to this code. It may not be used to create training material, %% ......

xueyuse0012
9分钟前
0
0
RabbitMq的安装

环境Centos6.5 32位 JDK 1.7.8 Jdk的卸载 rpm -qa|grep jdk yum –y remove 上边的安装包 JDK的安装 Rpm –ivh jdk安装包 配置环境变量 export JAVA_BIN=/usr/java/jdk1.7.0_80/bin export J......

DemonsI
13分钟前
0
0
http和https协议

HTTPS全称为Hypertext Transfer Protocol over Secure Socket Layer,中文含义为“超文本传输协议在安全加密字层”,简单来说就是加密数据传输,通俗的说就是安全连接。 HTTPS安全超文本传输...

寰宇01
19分钟前
0
0
vue内引入语音播报功能

在vue项目中引入语音播报,使用的科大讯飞语音接入, 具体思路为每次接收到语音信息后存入一个数组,然后监听这个数组,开始冲第一个索引播放,并且同时根据vuex getter 来动态删减数量 给a...

originDu
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部