码迷,mamicode.com
首页 > 其他好文 > 详细

iframe+postMessage 跨域通信

时间:2021-03-05 12:55:51      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:font   补充   跨域   结构   消息   height   trigger   tar   dde   

最近遇到一个项目,用了iframe嵌入了另一个项目作为内容区,两个项目之间需要进行信息传递,如果用window.top的话只支持同一个域,于是便想到了postMessage来进行跨域通信。

1.postMessage基本用法

【发送消息】

otherWindow.postMessage(message, targetOrigin, [transfer])
  • otherWindow 要通信的window对象(即接收消息的窗口)
  • message 传递的数据
  • targetOrigin 目标窗口的源(如果为*,可以为任何窗口传递信息)

【接收消息】

window.addEventListener(‘message‘, function (e) {
    console.log(e.data)  //e.data为传递过来的数据
    console.log(e.origin)  //e.origin为调用 postMessage 时消息发送方窗口的 origin(域名、协议和端口)
    console.log(e.source)  //e.source为对发送消息的窗口对象的引用,可以使用此来在具有不同origin的两个窗口之间建立双向通信
})

  

先说明一下框架结构:

<!--项目地址: http://aaa.com/a.html-->
<!--A区-->
<div>
  <!--B区-->
  <iframe src="http://bbb.com/a.html">
    <!--c区-->
    <iframe src="./b.html"></iframe>
  </iframe>
</div>

  

<!--A区-->
<div>
  <!--B区-->
  <iframe src="http://bbb.com/a.html">
    <!--c区-->
    <iframe src="./b.html"></iframe>
  </iframe>
</div>

注:下文会用ABC区来表示框架当前区域

【A → B → C】

A区:

$(document).ready(function(){
    window.addEventListener(‘scroll‘, function(){
  var top = document.body.scrollTop || document.documentElement.scrollTop;
  var clientH = document.documentElement.clientHeight || document.body.clientHeight;   var iframe = document.getElementById(‘iframe‘);   iframe.contentWindow.postMessage({type: ‘scrollpx‘, data: top, clientH: clientH}, *); }, false) })

B区:

<input id="scrollpx" hidden />

  

$(document).ready(function(){
    window.addEventListener(‘message‘, function(){},null)
    window.addEventListener(‘message‘, function(e){
       if(e.data.type===‘scrollpx‘){
           $(‘#scrollpx‘).attr(‘clienth‘, e.data.clientH).val(ed.ata.data);
       $(‘#scrollpx‘).trigger(‘input‘); } }) })

注:A区不能直接传数据至C,唯有曲线救国先传到B,再传至C(把传递到到数据赋值给B区隐藏到input,在C区监听B区input的到变化)。

C区:

parent.$(‘#scrollpx‘).bind(‘input propertychange‘, function(){
    var top = parseInt($(this).val());
    $(xx).css(‘top‘, top+‘px‘);
})

注:$(xx).change(function(){}必须有失焦过程才能触发,所以得改成上面的触发方式方能监听。

 

【C → A】

C区:

$(xx).on(‘click‘, function(){
    top.postMessage({
        type: ‘aaa‘,
        data: 200
    }, ‘*‘)
});

A区:

$(document).ready(function(){
window.addEventListener(‘message‘, function(e){
if(e.data.type===‘aaa‘){
window.scrollTo(0, e.data.data);
}
})
})

鄙人不才,欢迎补充。

 

 

iframe+postMessage 跨域通信

标签:font   补充   跨域   结构   消息   height   trigger   tar   dde   

原文地址:https://www.cnblogs.com/myyouzi/p/14422842.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!