其实就是网页之间传消息，像把自家网站嵌套到别人那儿，想跟外头互动或者接收他们发来的东西，都要用上这个功能。HTML5给咱们提供了一个超好用的postMessage帮手，实在是省心又实用！
为什么要用postMessage？
你们有没有这样的经历，就是在网上找东西的时候，想要把一些内容复制粘贴到别处去。比如说购物网站上，你可能看到某个商品有评论功能，结果进去却是另一个网站的界面。这时候，如果你想看看别人怎么说的，就得先和评论区聊天。不过现在不用愁，因为我们可以使用postMessage来解决这个问题！
postMessage的基本用法
otherWindow.postMessage(message, targetOrigin, [transfer]);
想要发送消息给小窗口？直接用postMessage就行了！先找出要发消息的小iframe的contentWindow，然后告诉它你要去哪儿。只要对方的协议、主机名或者端口与你提供的信息无误，消息就可以顺利送达咯。
发送消息的细节
给别人发消息时，得注意两件事。首当其冲，不管是传递文本还是对象都行；其次，要弄清对方的窗口来源，虽然”*”算是通用的但稳妥些咱还是说清楚比较保险；再说了，如果发错了窗口，那你的消息可能就没人看见，所以确保咱们的数据不被泄露才是关键！
接收消息的细节
记住去查收信件！当你用postMessage给别人发消息，他们那里就会触发MESSAGE事件。这个可牛了，里面包含着data（话题）、source（谁发的）和origin（从哪儿发出的）。这样你就可以轻而易举地拿到接收到的消息~
防范跨域攻击
PostMessage虽然很有用，但用时也要小心点。尤其是收到别的网站发来的信息，得弄清楚它是从哪里来的，别让XSS攻击给忽悠了。总之，瞅准信息来源，确认没啥问题就能搞定。
实战案例：内嵌预览模块
举个例子咱们可以把这个H5网页塞到电脑页面里，当作个小预览器用。别人在电脑上干啥，H5网页就能跟着变了。比如他们点开链接，H5网页就自动跳转；如果他们输入文字，H5网页也能实时显示出来。这俩页面就跟玩乒乓球似的，你发球（嵌入代码），我接住（监听事件）再回击，就这样来回折腾。
封装消息发送和接收
想要程序飞快地跑起来？那就把发消息和收消息的功能全塞到一个类里去！下次我们要上网聊天儿啥的时候，就直接用这个类的函数就好！比如说，咱们可以搞个”Message”类出来，里面设个send发信息，再设个receive收信息。
模拟消息类型的API
你用postMessage时，别忘了加个API~搞个常量表示不同信息，看到就能知道啥意思了。这样大家就能更好地理解和修代码了！
// 注意这里不是要获取iframe的dom引用，而是iframe window的引用
const iframe = document.getElementById('myIFrame').contentWindow;
iframe.postMessage('hello world', 'http://yourhost.com');
具体代码实现
说白了，很简单的！首先，我们得定义一个Message类，只需要搞几个发送和接收消息的函数。然后，当iframes加载完成以后，把相应的通信条目丢进去就是了。最后再用addEventListener方法把消息从iframe捕获到并进行处理，搞定！
window.addEventListener('message', msgHandler, false);
总结与展望
看了刚才的解释，现在你们应该会用HTML5的跨域通信了！那个叫做postMessage的东西真是好用到爆！使用起来也超级过瘾！快点用到网页上，这样网站就更加自由，肯定会赢得用户们的欢心~
提出问题
小伙伴们，有木有在上班时碰到过跨站通信的困扰哇?那你们用什么方法解决的呀？快来说说看，让大伙儿都听听。别忘了点赞分享！
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