使用React组件创建iframe小部件

Question

我在 React 中制作了一个小部件，旨在嵌入其他人的网站中（类似于网页底部右下角的 Drift/Intercom 聊天）。首先有一个按钮，然后当它被点击时，会弹出一个表单。这个按钮和表单都在 <Widget /> 组件内。

现在，我正在尝试将其放入一个 iframe 中，并将应用程序捆绑成一个单独的 .js 文件，以便其他人可以像以下方式嵌入它们的网站：

<script src="https://website.com/widget.js">
<script>
    Widget.mount({id: 1})
</script

widget.js 文件是实际应用程序，而下面的脚本用于传递一些 props。

我卡在如何将 Widget 组件放入 iframe 中并根据按钮或表单显示来调整 iframe 大小。 我尝试过使用像 react-frame-component 和 react-frame 这样的库，但都不起作用。 我也尝试过 Zoid，但似乎无法动态调整按钮/表单的 iframe 大小。

有人有什么建议吗？ 任何帮助都将不胜感激。

- express_v2

Answer 1

几个月前，我也曾有过类似的问题，所以我能理解你在整个过程中的困惑。

这是对我产生重大影响的资源（由直接参与Drift小部件开发的人编写）：https://medium.com/@ryan.da.baker/how-to-build-an-embedded-widget-with-react-redux-52a26604ccca

您还可以使用他引用的 Weasl Widget 源代码作为整个过程的指南：https://github.com/Rdbaker/weasl-widget

如果您在查看了上述内容后有些问题，请尝试联系我。不太确定如何在此处联系我。

- ElektrikSpark

---

谢谢你！在你这么做的时候，你是否遇到了根据所显示的组件调整 iframe 大小的同样问题？ - express_v2

是的。当按钮被点击时，您将想要更改iframe上的样式。为此，您需要在小部件和小部件所在网站之间进行通信。这就是shim和window.parent.postMessage()的作用。一旦您了解了Weasl小部件的架构，您就能够回答可能会遇到的问题。我花了一些时间阅读文章和源代码来内化解决方案背后的架构。 - ElektrikSpark