javascript - 创建一个可嵌入的 JavaScript 小部件

Question

我试图找出创建 javascript 小部件的最佳方法:
- 可以嵌入大多数网站
- 它是独立的(最初只是
- 可以配置

所需功能的一个示例是 Stripe 的结帐小部件:link

我在寻找资源、教程或最佳实践方面并不是很幸运。到目前为止，我所看到的最常见的流程是:

初始 自执行脚本插入网站

该脚本读取传递的配置并将其与默认

合并

触发行为的 Html 元素(例如按钮)，并绑定(bind)到处理程序

通过配置创建 iFrame，大部分逻辑发生

我目前的疑惑是:

是否有推荐的 Webpack(或类似)模板来从 ES6 项目创建初始脚本？

网站和 iframe 之间的通信(双向)

安全问题

欢迎任何意见!

Answer 1

我自己为此苦苦挣扎，最终构建了 www.simplicityblocks.com解决一些挑战。我最终使用 iFrame 作为小部件的隔离方法。这包含在自定义 Web 组件 (<simplicity-block>) 中。我还提供了一堆配置选项，这些选项是在从服务器端加载的。我认为这是创建需要在任何网页中通用安装的可嵌入小部件的最佳方法。关于小部件和主机页面之间的通信，我实现了多种方法来做到这一点。第一种是使用在自定义组件中设置的用户定义属性。当小部件加载到 iframe 中时，这些属性及其值将作为 URL 参数传递给小部件。如果页面主机以编程方式更改任何属性，则使用新参数值重新加载小部件。我还提供了一个 sendMessage 方法，该方法可以将任何对象传递给小部件而无需重新加载。小部件只需要在其中有一个消息监听器。这些不同的通信方法在 https://www.simplicityblocks.com/documentation/VanillaTestPage.html 中有更详细的描述。