在现代的 web 应用程序中，使用 iframe 技术来加载外部内容已经成为了一种常见的方式。尽管 iframe 技术可以很好地完成这项工作，但是与主页面进行通信是一项具有挑战性的任务。
幸运的是，npm 包 iframe-messenger 可以帮助我们轻松地在主页面和 iframe 之间进行通信。
安装
在使用 iframe-messenger 前，需要先安装它。如果你正在使用 npm，只需要在控制台运行以下命令：
npm install iframe-messenger --save
在主页面中使用
在主页面中，我们需要创建一个 iframe 实例和一个 MessageHandler 实例。为了创建这样的实例，我们可以使用 IframeMessenger 类。代码如下：
-- -------------------- ---- ------- -- --- --------------- -- ----- --------------- - ------------------------------------------- ----- --------- - --- ----------------- ------- ------------- -- ----- -------- --------- -- - -------------------- - --展开代码
在示例代码中，我们创建了一个 IframeMessenger 实例，并将其连接到了一个名为 my-iframe 的 iframe 实例上。这个实例还带有一个 receive 函数，可以响应从 iframe 发送的消息。
接下来，我们可以使用 messenger 实例来发送消息。例如：
messenger.send({ action: 'sayHello', data: { message: 'Hello, iframe!' } })
在这个例子中，我们使用了 send 函数来向 iframe 发送一条消息。这条消息包含一个 action 属性和一个 data 属性。接收消息的 iframe 可以根据这些属性来执行不同的操作。
在 iframe 中使用
在 iframe 中，我们也需要创建一个 IframeMessenger 实例。我们可以使用与主页面中相同的方法来创建实例，如下所示：
-- -------------------- ---- ------- -- --- --------------- -- ----- --------------- - ------------------------------------------- ----- --------- - --- ----------------- ------- -------------- -- ----- -------- --------- -- - -- --------------- --- ----------- - --------------------------------- - - --展开代码
在这个示例中，我们创建了一个 IframeMessenger 实例，并将其连接到父级窗口上。注意到这里使用了 window.parent 来连接到父级窗口。
当接收到来自父级窗口的消息时，我们可以使用与主页面相同的方式来处理它们。在此示例中，我们检查接收到的消息是否具有 sayHello 行动，并输出消息的内容。
总结
使用 iframe 和消息通信技术可以帮助我们实现更强大的 web 应用程序。通过使用 npm 包 iframe-messenger，我们可以轻松实现 iframe 和主页面之间的通信。希望这个使用教程对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63659
