在前端开发中，跨域访问是一个很常见的问题，而对于不同域的网页之间，我们通常需要使用跨域事件来进行通讯。npm 包 cross-domain-events-no-deps 就是一个方便我们实现跨域事件的工具包。
1. 安装 cross-domain-events-no-deps
使用 npm 安装 cross-domain-events-no-deps：
npm install cross-domain-events-no-deps
2. 使用 cross-domain-events-no-deps
2.1. 初始化
在发送跨域事件之前，需要在两个网页中分别初始化 cross-domain-events-no-deps：
-- -------------------- ---- -------
------- ---------------------------------
------- ---------------------------------------
--------
--- ----- - --- --------------
------- ---------------------
------- ----------------------------
------ ----
---
---------初始化时传入的参数说明：
origin: 发送事件的网页的域名。remote: 接收事件的网页的域名。debug: 是否开启调试模式。
如果需要在当前域内监听跨域事件，可以将 remote 设为 window.parent。
2.2. 发送跨域事件
xpost.emit('event-name', {
data: 'some data'
});可以在 emit 方法中传入多个参数，可以是任何类型的数据。
2.3. 监听跨域事件
xpost.on('event-name', function(data) {
console.log('receive data: ', data);
});在监听跨域事件的回调函数中可以处理接收到的数据，回调函数的参数即为 emit 方法中传入的数据。
3. 示例代码
网页 A
-- -------------------- ---- -------
---- -- -- ------------------ ---
--------- -----
----- ----------
------
----- ----------------
--------------- ---------
------- ----------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
-------
------
------- ------------------ ---- -- ----------
--------
--- ----- - --- --------------
------- ---------------------
------- ----------------------------
------ ----
---
------------------------------- -
------------------ -
----- --------
---- --
---
---
---------------- -------------- -
-------------------- ----- -- ------
---
---------
-------
-------网页 B
-- -------------------- ---- -------
---- -- -- ------------------------- ---
--------- -----
----- ----------
------
----- ----------------
--------------- ---------
------- ----------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
-------
------
--------
--- ----- - --- --------------
------- ----------------------------
------- ---------------------
------ ----
---
---------------- -------------- -
-------------------- ----- -- ------
------------------ -
----- --------
---- --
---
---
---------
-------
-------在网页 A 中点击按钮后，会在控制台中输出发送的数据，并在网页 B 中监听到该事件，并输出接收到的数据，然后再通过 xpost.emit 方法将处理过的数据发送回网页 A。
4. 总结
npm 包 cross-domain-events-no-deps 省去了我们手写跨域事件的繁琐过程，使得我们在跨域访问时可以更加方便地进行数据传递。在使用 xpostmessage 时需要注意不同网页的域名问题，并且要初始化和发送事件的网页需要同时引用 xpostmessage.js 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557b481e8991b448d4bce