7

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

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

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

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

我目前的疑惑是：

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

欢迎任何意见！

4

1 回答 1

0

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

于 2020-12-21T15:15:27.903 回答