什么是 jschannel？
jschannel 是一个用于在不同域之间进行通信的 JavaScript 库。它提供了一种安全的方式，让嵌入式 iframe 或弹出窗口中的 JavaScript 程序可以与父级页面或打开它们的窗口进行通信。
安装
你可以使用 npm 进行安装：
npm install jschannel然后在你的项目中将其导入：
const Channel = require('jschannel');
你也可以直接从 jschannel 的 Github 仓库中下载并使用它。
如何使用
首先，我们需要创建一个 Channel，在这个 Channel 上我们可以注册回调函数，并通过它来发送和接收消息。例如，我们可以在父页面中创建一个 Channel：
var channel = Channel.build({ window: window.parent, origin: '*', scope: 'testScope' });
上述代码中：
window表示我们要将 Channel 与哪个窗口绑定。在这个例子中，我们选择绑定到父页面（window.parent）。origin表示对方窗口的来源地址。在这里，我们设置为*，表示接受来自任何来源的消息。scope表示我们给这个 Channel 取了一个名字，这个名字可以帮助我们在其他地方引用这个 Channel。
然后，我们就可以在 Channel 上注册回调函数了：
channel.bind('testEvent', function(trans, data) { console.log(`Received ${data} from ${trans.origin}`); });
上述代码中，我们在 Channel 上注册了一个叫 testEvent 的事件，并传入了一个回调函数。当 Channel 接收到名为 testEvent 的事件时，这个回调函数就会被执行。我们可以在这个回调函数中处理接收到的数据。
现在我们已经建立了一个 Channel 并注册了回调函数，接下来让我们向它发送一些消息。我们可以使用 channel.notify 方法来发送消息：
channel.notify({ method: 'testEvent', params: ['Hello, World!'] });
上述代码中，我们使用 channel.notify 向 Channel 发送了一个名为 testEvent 的消息，并传递了一个字符串参数 'Hello, World!'。Channel 会将这个消息发送给父页面，并在那里触发相应的回调函数。
示例代码
下面是一个完整的示例代码，它演示了如何在两个页面之间使用 jschannel 进行通信：
父页面
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- ------------ ------- ------ ------- -------------------------- ------- ---------------------------- -------- --- ------- - --------------- ------- --------------------------------------------------------- ------- ---- ------ ----------- --- ------------------------- --------------- ----- - --------------------- ------- ---- ------------------ --- --------------------- - ---------------- ------- ------------ ------- -------- -------- --- -- ------ --------- ------- -------展开代码
子页面
-- -------------------- ---- ------- --------- ----- ------ ------ ------------ ------------ ------- ------ --------- --------- ------- ---------------------------- -------- --- ------- - --------------- ------- -------------- ------- ---- ------ ----------- --- ------------------------- --------------- ----- - --------------------- ------- ---- ------------------ --- --------- ------- -------展开代码
在以上示例中，我们首先在父页面和子页面中分别导入了 jschannel 库。然后在父页面中创建了一个与子页面相关联的 Channel，并注册了一个回调函数
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37891
