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

Question

我试图找出创建javascript小部件的最佳方法： - 可嵌入大多数网站 - 它是自包含的（最初只是 - 可以配置

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

我在寻找资源，教程或最佳实践时并不是很幸运。从我到目前为止看到的最常见的流程是：

1. 初始自行执行的脚本已插入网站
2. 该脚本读取传递的配置并将其与默认
合并
3. 触发行为的Html元素（例如按钮），并绑定到处理程序
4. 通过配置创建iFrame，大部分逻辑发生

我目前的疑虑是：

1. 是否有推荐的Webpack（或类似）模板来创建ES6项目的初始脚本？
2. 网站与iframe之间的通信（双向）
3. 安全问题

欢迎任何输入！

Answer 1

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

中更详细地描述了这些不同的通信方法