一、跨域通信的必要性
上网互动多了，经常需要搬点啥东西到其他网站或页面上，但不一定有相同的权限！这时候，HTML5的PostMessage功能就派上用场了，它能帮忙在各个页面之间安全地传递信息，实现数据分享~
跨域通信，就是把各种网站串起来用，就像搭积木一样，打破那种信息孤立的感觉，让你玩得更爽快！举个例子比如你想知道今天什么天儿，或者想去网上淘点好玩意儿，这会儿跨域通信就能帮到你了！
二、PostMessage的基本原理
PostMessage像是HTML 5中的魔法棒！它能让我们在网页间放心地聊悄悄话。用法很简单，一个网页给别的网页发条信息，那边就能接收到并有所回馈。这个小玩意儿对那些用iFrame嵌套或多个H5页面交谈的人特别有用。
otherWindow.postMessage(message, targetOrigin, [transfer]);
你想在网页上嵌入别的网页吗？那就用iframe呗！然后别忘了还有PostMessage这个小助手。你只需要传递三个信息：要说啥、给谁（目标窗口）以及由谁发起（源点origin）。哪怕两个页面地址不同，也不怕有数据安全问题！
三、PostMessage的API详解
这API可真是好用！用它就像玩儿游戏一样轻松愉快，只要做三件事儿：搞清楚别的窗户外的事儿（otherWindows）、告诉它你要说啥（message）、告诉它你从哪儿来的（targetOrigin）。这几个设置可是能决定信息是否能稳妥地传过去~
比如在网站上弄一个iframe框，然后用iframe.contentWindow找到了那个目标对象。接着，就可以通过postMessage这个方式，告诉对方想说的话以及自己是谁。这样一来，信息就能准确无误地传到对方那儿去！
四、消息的发送与接收
要通过PostMessage发消息，最重要的是俩步！首先要了解目标窗口用的啥协议，是谁的哪个端口连着？这些都得和targetOrigin对上才能发送成功。接着，你得在目标窗口里添加个eventListener来准备接收消息。这样小息来了之后就能及时处理。
接到短信时，你得看三点：data（消息本身），source（发件人）还有origin（从哪发来的），这可是挺重要的。知道这些，就可以判断谁发的啥样的信息，再决定怎么办咯。
五、安全性考虑
其实用PostMessage挺方便的，不过别忘了注意安全！尤其涉及到敏感信息时，弄清楚弹出窗口来自哪里非常关键。如此可防止资料泄露，减小潜在风险。
你知道怎么设置系统帮我们过滤掉一些可能有问题的消息的来源吗？比如说，有些网站可能会利用XSS攻击来盗取个人信息。只要注意这点就不用担心资料泄露！
六、代码示例与封装
下面给大家看看如何用PostMessage搞定网页上的消息传递。就拿主页上的嵌入框来说，你可以把信息扔过去，然后在那里接住并处理它，简单？
在主页面中，你可以这样发送消息：
javascript 找到"myIframe"那个框框，操作就搞定了 直接在iframe里面窗口中输入“父级的你好”，目标连接就是那个"http://target-domain.com"！
而在iframe中，你可以这样接收消息：
咱就这么定了有人发给窗口信息时，就用这个函数搞定。
只要事件开始地址不为”http://target-domain.com”,咱们就不用操心了。
// 注意这里不是要获取iframe的dom引用，而是iframe window的引用
const iframe = document.getElementById('myIFrame').contentWindow;
iframe.postMessage('hello world', 'http://yourhost.com');
log(‘收到信息！’, event.data);
});
老话儿说，让咱的代码既好使又易修复，那就是得把发收消息这事儿放在同一个类里面搞，方便许多！
window.addEventListener('message', msgHandler, false);
七、实际应用场景
说起PostMessage这货，真是好用得不得了。咱们逛网页的时候不都会遇到那种好多种商品，有的是同一网站的，有的却来自其他地方的情况吗？这个时候，PostMessage就能大显身手，帮我们解决这个头疼的跨站数据传输问题！
另一种我们常遇到的就是一大帮人一起做事。比如说，阿我这里有个团队用的小程序，他们就想看别人在同一页上发的新消息，这些消息还会来自各种地方。这时候，我们只需要看看PostMessage那个玩意儿，大伙儿就可以分享实时信息，这样做事就高效多！
八、总结与展望
看这儿，了解了HTML5的PostMessage，是不是觉得跨站交流都没那么复杂了？不仅如此，它还有助于保障我们的网络信息安全。所以说，在现今的互联网世界里，PostMessage可是个超级实用又必要的工具
以后，随着网络科技越来越发达，我们对跨网站沟通的需求也只会越来越多。这个PostMessage就像是HTML5给我们的跨站神器，在网页设计上起到了关键作用，让你可以随心所欲地创建强大又灵活的网页应用！
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);
}
}
哈喽朋友们，大家有没有遇到跨域沟通的问题呀？咋解决的？快留言说说您的经验！点赞转发一下别忘了~
评论0