使用 React 组件创建 iframe 小部件答案

【问题标题】：Creating iframe widget with React components使用 React 组件创建 iframe 小部件
【发布时间】：2021-01-24 16:59:56
【问题描述】：

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

我现在正在尝试将其放入 iframe 并将应用程序捆绑到单个 .js 文件中，以便其他人可以将其嵌入到他们的网站中，如下所示：

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

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

我坚持的是如何将 Widget 组件放入 iframe 并根据是否显示按钮或显示表单来调整 iframe 的大小。我曾尝试使用 react-frame-component 和 react-frame 之类的库，但似乎都不起作用。 Zoid 也是我尝试过的东西，但似乎我无法动态调整按钮/表单的 iframe 大小。

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

【问题讨论】：

标签： javascript reactjs iframe widget embed

【解决方案1】：

几个月前我有这个确切的问题，所以我可以理解你对整个过程的困惑。

这是改变我游戏规则的资源（由直接从事 Drift 小部件工作的人编写）：https://medium.com/@ryan.da.baker/how-to-build-an-embedded-widget-with-react-redux-52a26604ccca

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

如果您在查看了其中的一些内容后有任何疑问，请尝试与我联系，但不确定如何在此处进行。

【讨论】：

谢谢！当您这样做时，您是否遇到过根据显示的组件调整 iframe 大小的问题？
是的。单击按钮时，您将要更改 iframe 上的样式。为此，您需要在小部件和小部件所在的网站之间进行通信。这就是 shim 和 window.parent.postMessage() 完成的工作。一旦您了解了 Weasl 小部件的架构，您将能够回答您可能遇到的问题。我花了一些时间阅读这篇文章和源代码来内化解决方案背后的架构。