html5通过postMessage进行跨域通信的方法


Posted in HTML / CSS onDecember 04, 2017

最近工作中遇到一个需求,场景是: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);
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
html5唤起app的方法
Nov 30 #HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 #HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 #HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 #HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 #HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 #HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 #HTML / CSS
You might like
解析如何用php screw加密php源代码
2013/06/20 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP实现合并discuz用户
2015/08/05 PHP
解密效果
2006/06/23 Javascript
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
python 调试冷知识(小结)
2019/11/11 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
纪念9.18事变演讲稿
2014/09/14 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
Python绘制分类图的方法
2021/04/20 Python
sql注入教程之类型以及提交注入
2021/08/02 MySQL