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