在前端开发中，我们经常需要进行跨域通信。而 bs-telepathic-client 是一款能够帮助我们实现跨域通信的 npm 包。它能够基于 postMessage 和 localStorage 实现跨文档通信和跨标签页通信，较为轻便和简便。在本篇文章中，我们将介绍 bs-telepathic-client 的使用教程以及相关的注意事项。
安装和引用
使用 bs-telepathic-client 需要先安装该包，可以通过 npm 安装：
npm install bs-telepathic-client
在我们需要使用的文件中，使用 import 语句引入 bs-telepathic-client：
import Telepathy from 'bs-telepathic-client';
初始化
在使用 bs-telepathic-client 之前，我们需要先进行初始化。具体地，我们需要调用 Telepathy.init 方法。该方法需要提供一个指向 iframe 或弹出窗口的 URL，以及一个可选的对象，具体内容如下：
Telepathy.init('http://example.com/path/to/iframe.html', options);其中 options 包含如下属性：
name- 特定命名空间，用于标识对应的通信实例。若不提供，则指向该页面的每个实例都是相似的。useLocalStorage- 是否使用 localStorage 存储通信信息。默认为true。timeout- 响应超时时间（单位：毫秒）。默认值为60000。controllerId- 定义传入或传出的数据的 ID。默认值为Telepathy.controller.DEFAULT_CONTROLLER_ID。debug- 是否启用调试模式。在调试模式下，Telepathy 会生成调试信息并向控制台输出。默认为false。
发送和接收消息
在初始化完成后，我们可以使用 Telepathy.sendMessage 方法向指定的 iframe 或弹出窗口发送消息：
Telepathy.sendMessage('hello from parent');在 iframe 或弹出窗口内，我们可以使用 Telepathy.receive 方法接收消息。该方法会返回 Promise，使用方式类似于：
Telepathy.receive().then(function (message) {
console.log('received message:', message);
});我们也可以同时接收到多个消息，并为每个消息提供一个指定的命名空间：
Telepathy.receive('namespace1').then(function (message) {
console.log('received message in namespace1:', message);
});
Telepathy.receive('namespace2').then(function (message) {
console.log('received message in namespace2:', message);
});注意事项
bs-telepathic-client 无法用于与不同域的页面通信。如果需要与不同域的服务交互，请使用跨域 AJAX 请求等方式。
bs-telepathic-client 使用 postMessage 和 localStorage 技术，因此存在数据安全性问题。请注意在传输机密信息时进行加密等处理。
bs-telepathic-client 中与消息相关的操作（消息发送、接收等）都是异步的，因此需要使用 Promise 或 async/await 等机制进行数据处理。
示例代码
在示例代码中，我们将创建一个 HTML 文件和一个 js 文件。HTML 文件中包含一个 iframe，js 文件中使用 bs-telepathic-client 进行跨文档通信。当用户在 iframe 中输入一个 message 并点击按钮时，该信息将被传递给页面的 js 文件，并在控制台中输出。
HTML 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------------------- ------------
-------
------
------- ------ -------------
------- --------------- ----------------------------
------- ---------------------- ---------------------------
-------
-------js 文件：
-- -------------------- ---- ------- ------ --------- ---- ----------------------- --------------------------------------------------- --------------------------------- --------- - --------------------- ---------- --------- --- -------- --------------- - --- ----- - ----------------------------------------- --- ------- - ------------ ------------------------------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e2f81e8991b448e7352