cvmachine.com - 申博开户网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:如何使用html5通过postmessage进行跨域通信?

如何使用html5通过postmessage进行跨域通信?

2017-12-31 17:06:48 来源:www.cvmachine.com 【

如何使用html5通过postmessage进行跨域通信?

最近工作中遇到一个需求,场景是:h5页作为预览模块内嵌在pc页中,用户在pc页中能够做一些操作,然后h5做出响应式变化,达到预览的效果。

这里首先想到就是把h5页面用iframe内嵌到pc网页中,然后pc通过postMessage方法,把变化的数据发送给iframe,iframe内嵌的h5通过addEventListener接收数据,再对数据做响应式的变化。

这里总结一下postMessage的使用,api很简单:

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow是目标窗口的引用,在当前场景下就是iframe.contentWindow;

message是发送的消息,在Gecko 6.0之前,消息必须是字符串,而之后的版本可以做到直接发送对象而无需自己进行序列化;

targetOrigin表示设定目标窗口的origin,其值可以是字符串"*"(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。对于保密性的数据,设置目标窗口origin非常重要;

当postMessage()被调用的时,一个消息事件就会被分发到目标窗口上。该接口有一个message事件,该事件有几个重要的属性:

1.data:顾名思义,是传递来的message
2.source:发送消息的窗口对象
3.origin:发送消息窗口的源(协议+主机+端口号)

这样就可以接收跨域的消息了,我们还可以发送消息回去,方法类似。

可选参数transfer 是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。

那么,当iframe初始化后,可以通过下面代码获取到iframe的引用并发送消息:

// 注意这里不是要获取iframe的dom引用,而是iframe window的引用
const iframe = document.getElementById('myIFrame').contentWindow;
iframe.postMessage('hello world', 'http://yourhost.com');

在iframe中,通过下面代码即可接收到消息。

window.addEventListener('message', msgHandler, false);

在接收时,可以根据需要,对消息来源origin做一下过滤,避免接收到非法域名的消息导致的xss攻击。

最后,为了代码复用,把消息发送和接收封装成一个类,同时模拟了消息类型的api,使用起来非常方便。具体代码如下:

export default class Messager {
  constructor(win, targetOrigin) {
    this.win = win;
    this.targetOrigin = targetOrigin;
    this.actions = {};
    window.addEventListener('message', this.handleMessageListener, false);
  }

  handleMessageListener = event => {
    if (!event.data || !event.data.type) {
      return;
    }
    const type = event.data.type;
    if (!this.actions[type]) {
      return console.warn(`${type}: missing listener`);
    }
    this.actions[type](event.data.value);
  }

  on = (type, cb) => {
    this.actions[type] = cb;
    return this;
  }

  emit = (type, value) => {
    this.win.postMessage({
      type, value
    }, this.targetOrigin);
    return this;
  }

  destroy() {
    window.removeEventListener('message', this.handleMessageListener);
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持申博开户。


本文地址:http://www.cvmachine.com/a/question/95437.html
Tags: HTML5 通过 postMessage
编辑:申博开户网
  • 上一篇:如何使用Html唤起app?
  • 下一篇:没有了
  • m88 188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes 真钱的棋牌游戏 casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 nba英文官网 嘉年华官网 皇冠备用 火箭队官网 中国人论坛 bet 单双公式 博彩资讯网 w88优德 港京印刷图库 澳门足球盘 球盘 娱乐场 联众网站 沙龙365 7080棋牌游戏 真钱 澳门回归日期 大众娱乐网 卡宾官方旗舰店 mg电子 全亚洲首选288x nba即时比分 本港 中国足彩竞猜网 斗地主规则 七星彩论坛图规 网上赌博 单双规律 沈泳 华夏娱乐网 明升备用网址 梦网书城 盈禾国际 明升体育 博狗沃鑫 卡宾官方旗舰 信誉赌场 球探比分网 竞彩论坛空间 三亚娱乐 soutec 北京福利彩票 澳门彩票公司 北京pk10 凤凰 纸牌小游戏 皇冠现金代理 银河国际亚洲首选288x 三六八高手论坛 空中城市 赌球心得 188比分 让球规则 三星娱乐城 诺贝尔娱乐城 今天有nba直播吗 5060全讯网 新世纪 久乐娱乐场 世界杯盘口 易胜博 麻将单机版 华人娱乐总站 财神爷心水论坛 巴特 澳门百利宫 明升 红姐统一主图库 九龙老牌图库 打牌 娱乐王子 娱乐真人 亚豪平台 真人娱乐 飞禽走兽老虎机 188bet下载 博发娱乐城 北单 陈怀生 比分188 百万图库 老挝赌博 pc蛋蛋注册 天上人间娱乐 红姐统一图库 产业新闻网 葡京
    相关文章列表
    关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部