在前端开发过程中，我们经常需要在不同的窗口或框架（比如 iframe）中传递数据。为了解决这个问题，PostMessage API 被设计出来，它是一个强大的机制，可以让你在不同的窗口或框架之间进行跨域通讯。
不过，PostMessage API 有一些限制。它需要你编写相应的 JavaScript 代码来处理通讯，而且这个代码需要写得非常谨慎，以避免 XSS 攻击等安全问题。这就是为什么 @niksy/postmessage 这个 npm 包被设计出来的原因。
在这篇文章中，我们将会探讨如何使用 @niksy/postmessage 这个 npm 包来传递跨域消息，并且解释一下它的优点和一些注意事项。
安装
首先，我们需要将 @niksy/postmessage 这个 npm 包安装到我们的项目中。你可以使用 npm 或者 yarn 来完成这个任务：
$ npm install @niksy/postmessage
或者：
$ yarn add @niksy/postmessage
用法
@niksy/postmessage 提供了一个 postmessage API 封装，可以让我们更加方便地处理跨域消息。下面是一个简单的示例，展示了如何使用它来传递消息：
-- -------------------- ---- ------- ------ ----------- ---- --------------------- ----- ------------ - ----------------- ----- ------- - --- ------------- ------- ------------- ------- ---------------------- --- ------------------- ---------
这个例子展示了如何向 targetWindow 发送一条消息。在这里，targetWindow 是一个 iframe 窗口，我们指定了它的 origin 是 https://example.com。请注意，我们必须指定 origin，以确保我们向正确的目标窗口发送消息。
接下来，在 targetWindow 窗口下，我们需要监听消息并处理它们：
-- -------------------- ---- ------- ------ ----------- ---- --------------------- ----- ------- - --- ------------- ------- -------------- ------- ---------------------- --- -------------------- -- - ----------------- ---
在这里，我们创建了一个新的 PostMessage 实例，并且使用 listen() 方法来监听消息。当收到一条消息时，我们会将它打印到浏览器的控制台上。
支持 IE
@niksy/postmessage 不仅支持现代浏览器，还支持 IE 11（或以上）。为了做到这一点，它使用两个不同的机制来发送和监听消息：
- 在现代浏览器中，它使用
Window.postMessage()API 来发送和接收消息 - 在 IE 11 中，它使用
window.postMessage而不是Window.postMessage()并添加了一个data属性（用于传递消息）和source属性（用于指定消息的发送源）
这就意味着，无论你的浏览器是否是现代浏览器，@niksy/postmessage 都可以正常工作。
结论
使用 @niksy/postmessage 包可以用来更方便地使用 PostMessage API。虽然这个 API 可以在现代浏览器中正常工作，但它并不方便。 @niksy/postmessage 封装了 PostMessage API，使得我们可以更加方便地处理跨域消息，并且支持 IE 11。
总体来说，在使用 PostMessage API 时，我们要遵循一些最佳实践来确保安全和正确性。 @niksy/postmessage 适用于纯前端开发人员，可以使跨窗口通信的调试和维护变得更加容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552dc81e8991b448d0462