如何解决使用React组件创建iframe小部件
我在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的大小。
有人有什么建议吗?任何帮助将不胜感激。
解决方法
几个月前我有一个确切的问题,所以我可以理解您对整个过程的困惑。
这对我来说是改变游戏规则的资源(由直接在Drift小部件上工作的人编写):https://medium.com/@ryan.da.baker/how-to-build-an-embedded-widget-with-react-redux-52a26604ccca
您还可以在整个过程中使用他引用的Weasl小部件源代码作为指南:https://github.com/Rdbaker/weasl-widget
如果您在看完某些内容后仍有疑问,请尝试与我联系,而不完全确定如何在此处进行操作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。