在前端开发中，我们时常需要在不同的域名页面间进行通信，而现代浏览器中使用 iframe 或者 popup window 等方式进行跨域通信是一种比较常见的方式。但是它们的实现都需要一些复杂的操作，例如手动添加事件监听、维护 Origin 白名单等等。如果能有一个简单且易用的跨域通信方案，将大大提高我们开发的效率和可维护性。在这里，我会介绍一个优秀的 npm 包 Framebus ，它提供了一种易用的跨域通信方案。
Framebus 简介
Framebus 是一款面向可扩展性的跨域消息传递工具，可以被广泛应用在各种跨域场景下。它通过动态生成 iframe 或者 popup window 实现跨域消息的传递，实现了简洁易用的 API 并且支持多个应用间的通信。而且在实现上 Framebus 考虑了安全性问题，例如接口的权限控制，支持 Origin 白名单等等，用户可以直接使用而无需关注这些安全问题。
安装 Framebus
你可以使用 npm 安装 Framebus 并且在项目中使用它：
npm install framebus --save
或者通过 CDN 引入 Framebus：
<script src="https://unpkg.com/framebus@^3.0.1/dist/browser.js"></script>
在文档中，我会介绍如何通过 npm 包的方式来使用 Framebus。
使用 Framebus
首先，你需要在你的应用中使用 Framebus 构造一个 Bus 实例：
import Framebus from 'framebus';
const bus = new Framebus({
// ...
});在构造 Bus 实例时，也可以传入一些参数，例如 Origin 白名单、接口权限控制等等，这里不会详细讲解，你可以参考官方文档进行学习：
https://github.com/MoveableTypes/framebus#new-framebusserviceconfig
构造 Bus 实例后，你可以通过它实现跨域消息的发送和接收：
发送跨域消息
通过 Bus 实例，你可以发送一条跨域消息：
bus.emit('someEvent', { someData: 123 });其中，emit 方法接收两个参数，第一个参数是事件名，第二个参数是需要传递的数据（可以是任意 JavaScript 对象）。在发送消息前，Framebus 会自动为当前应用创建一个 iframe 或者 popup window，然后将消息发送给对应的 iframe 或者 popup window。
接收跨域消息
通过 Bus 实例，你可以监听并接收跨域消息：
bus.on('someEvent', (data) => {
console.log(data.someData);
});其中，on 方法接收两个参数，第一个参数是事件名，第二个参数是事件处理函数，当收到该事件时，会自动调用该处理函数并且传入接收到的数据。
示例代码
最后，我提供一份完整的示例代码，用于展示 Framebus 的使用：
-- -------------------- ---- ------- ------ -------- ---- ----------- -- -- --- -- ----- --- - --- ---------- ---------- ---------------------------- -------------- ----- --- -- ------ ------------------- ------ -- - --------------------------- --- -- ------ --------------------- - --------- --- ---
在这个示例中，我们构造了一个 Bus 实例，然后白名单为 https://www.example.com，告诉 Framebus 只有在该域名下才可以使用我们的接口；同时，我们添加了事件监听器，当收到名为 someEvent 的事件时，会自动打印接收到的数据；最后，我们通过 emit 方法发送一条名为 someEvent 的事件，并且传递了一个 someData 属性来描述数据。
总结
通过本文，你了解了一个优秀的 npm 包 Framebus ，它可以让我们在跨域的情况下进行通信，而且简洁易用，并且具有一定的安全性。在开发过程中，如果遇到了跨域通信的问题，你可以尝试使用 Framebus 进行解决。如果你需要更加详细或者个性化的使用方式，可以查看 Framebus 的官方文档：
https://github.com/MoveableTypes/framebus
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f117a2a403f2923b035c26f