什么是 ember-post-robot?
ember-post-robot 是一个 npm 包，它是一个通用的跨域通信库。这是一个强大且易于使用的库，可以用于在不同的窗口、框架和浏览器中进行通信。使用 ember-post-robot 可以实现跨域数据交互、跨域调用远程服务、在不同站点之间的数据传输等等。在这篇文章中，我们将会详细介绍如何使用 ember-post-robot。
安装
安装 ember-post-robot 可以使用 npm 包管理工具，执行以下命令：
npm install ember-post-robot --save
使用方法
使用 ember-post-robot 可以分为两部分，一部分是在主体窗口中(即发送方)，另一部分是在嵌入式窗口中(即接收方)。下面分别列出它们的使用方法。
在主体窗口中
在主体窗口中，我们要定义一个 iframe 对象，并使用 ember-post-robot 创建一个新的隧道，并将其连接到相应的 iframe 中。
-- -------------------- ---- -------
------ --------- ---- -------------------
-- -- ------ --
--- ------ - --------------------------------------------------------
-- ----
--- ------ - ---------
---------------
--------
-- -- ------ ------
------------
----- -- -
------------------------
-
--
-- ----
------------------------ - ----- ------ ------- ---在上面的示例中，我们首先获取了一个 iframe 对象，然后使用 PostRobot 创建了一个隧道，用于监听 iframe 中事件(eventName)的触发，并在事件触发时，打印接收到的数据。
最后，我们使用 tunnel.send 方法，向 iframe 中发送数据。
在嵌入式窗口中
在嵌入式窗口中，我们需要监听主体窗口发送的事件，并在相应事件发生时，处理事件数据。
-- -------------------- ---- -------
------ --------- ---- -------------------
-- -----------
-------------
------------
----- -- -
------------------------
-- -----------
------------------------------ - ----- ------ ------- ---
-
--在上面的示例中，我们用 PostRobot 的 on 方法监听了事件(eventName)，并在事件触发时，首先打印接收到的数据，然后使用 event.source.send 方法，将应答数据发送给主体窗口。
这就是使用 ember-post-robot 的简单方法。下面我们再看一个更实用的例子。
实例
假设我们有一个带有嵌入式 iframe 的网页，我们需要向 iframe 发送一个请求，在 iframe 中执行某个操作，并返回结果。
在主体窗口中，我们可以使用如下代码：
-- -------------------- ---- -------
------ --------- ---- -------------------
-- -- ------ --
--- ------ - --------------------------------------------------------
-- ----
--- ------ - -------------------------
-- ----
--------------------- ---------------------
------
-- ------
-----
--在嵌入式窗口中，我们可以使用如下代码：
-- -------------------- ---- -------
------ --------- ---- -------------------
-- -----------
-------------
---------
----- -- -
--- --- - -----------
-- ---------
----------
-------------- -- ----------------
---------- -- -
--------------------------- ------
---
-
--在上面的示例中，我们在主体窗口使用了 tunnel.send 方法，向 iframe 中发送了一个请求(getUrl 请求)，并将 url 参数传递给 iframe。在嵌入式窗口中，我们用 PostRobot 的 on 方法监听了名为 getUrl 的事件，并在事件触发时，根据传递的 url 参数执行了操作，并使用 event.source.send 返回结果。
总结
在这篇文章中，我们学习了如何使用 ember-post-robot 实现跨域通信。我们了解了如何在主体窗口中定义 iframe 对象并使用 PostRobot 创建一个隧道，以及如何在嵌入式窗口中监听主体窗口发送的事件，并执行相应的操作。希望本文对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005625681e8991b448df945