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

Question

我正在尝试找出创建 javascript 小部件的最佳方法，该小部件： - 可以嵌入到大多数网站中 - 它是自包含的（最初仅 - 可以配置

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

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

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中有更详细的描述。