关于postMessage跨域(html5、h5转别人)
关于postMessage跨域(html5、h5转别人)
leona_lily 发表于3年前
关于postMessage跨域(html5、h5转别人)
  • 发表于 3年前
  • 阅读 34
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: postMessage是html5新增的方法,主要用来解决跨域通信的问题

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。


共有 人打赏支持
粉丝 9
博文 91
码字总数 37807
×
leona_lily
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: