当前第2页 返回上一页
最后，为了代码复用，把消息发送和接收封装成一个类，同时模拟了消息类型的api，使用起来非常方便。具体代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 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);
}
}
|
以上内容就是html5通过postMessage进行跨域通信的方法，希望能帮助到大家。
相关推荐：
HTML5中的postMessage API基本使用方法分享
HTML5中使用postMessage实现两个网页间传递数据
html5中postMessage实现Ajax中的POST跨域问题
以上就是html5通过postMessage进行跨域通信的方法的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
html5 web 存储详解
h5的文本格式化使用方法
总结html5中新表单元素的使用方法及实例教程
html h1标签怎么居中？有关于html中的h1居中实例解析
html中的title是什么意思？
移动端h5中百度地图的click事件的介绍（代码示例）
html5 移动端自适应布局
h5视频中背景音乐如何自动播放
一个完整的html对象是什么样的，如何生成？
为什么现在html5的优势越来越大
更多相关阅读请进入《postmessage》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » html5通过postMessage进行跨域通信的方法
