Javascript 了解何时加载BigCommerce结帐表单的可靠方法

我正在尝试侦听表单何时加载到BigCommerce签出页面。 我们需要将地址验证添加到页面（+禁用除第一个地址字段之外的所有字段，以便由我们正在使用的地址验证服务自动填充）

地址验证服务的JavaScript在表单元素存在之前启动，因为BigCommerce签出页面通过向页面动态添加带有JavaScript链接的HTML，然后加载表单

我想用一个

轮询，以200毫秒重复设置超时，直到某个已知元素存在

使用MutationObserver，它似乎做了我想做的事情——我可以控制加载表单的div，所以使用mutationovbserver来监听“子树”事件，但阅读MDN文档时，很清楚子树的真正含义和/或触发时间

---

有什么建议吗？

如果您正在进行优化的单页签出，您肯定会希望使用变异侦听器

BC团队的这篇博文包含了一些非常方便的变异侦听器代码，我在多个签出定制中使用了这些代码：

警告-OPC签出是一个外部应用程序-根本不包括在基本的基石Repo源代码中。我相信这是一款React应用程序。如果您熟悉React和其他框架如何处理条件呈现，它们通常会根据内部状态卸载和重新装载组件/HTML元素

例如，当您在签出时从“Shipping Details”步骤移动到“Billing Details”步骤时，Shipping Details DOM节点将完全从页面中卸载

这意味着您通过JS/JQuery附加到它们的任何内容，例如事件侦听器，都将消失。你需要配置变异监听器来监听你需要处理的每个部分的挂载，而不仅仅是整个签出应用程序。这使得结帐定制非常难以处理

另一个问题-如果您想过度写入输入字段值，您将再次与React应用程序发生冲突。正如我所提到的，React包含一个内部状态，它控制地址输入的值。您可以尝试使用JS来更改这些输入的

值

，但React应用程序中与这些字段对应的内部状态不会更新。您需要使用checkout storefrontAPI来更新这些值，或者需要使用黑客解决方案手动触发React的内部合成事件发射器在使用JS代码更新

值后，我使用此库取得了一些成功：

这根本不是一个理想的解决方案。

最好，如果您需要严格控制签出，您可以使用BC提供的签出sdk开发定制的签出解决方案，但这不是一项轻松的任务，因为它更像是一组用于构建自定义签出流的构建块，而不是您可以立即进入并开始定制的东西。
正如您所指出的，它是有缺陷的。MutationObserver工作得很好，挑战在于如何做出反应以确认更改。它最终使用链接到的
react触发器更改
lib工作。除此之外的所有尝试都失败了。可怕的是，库维护人员建议不要在生产中使用它。如果react的实现发生变化，或者如果BC团队决定更新react使用的版本，我们将遇到麻烦。在这一点上，它将试图通过手动操作实际的DOM节点来发出这些合成事件，触发一些深层原型属性——这可能是跨浏览器的一场真正的噩梦。但愿它不会发生：）我知道。本周我们需要一个解决方案，但我们必须使用checkout SDK并构建自己的解决方案来避免这种情况。如果您运气好，请告诉我！我们还没有足够的人力投入到一个完整的签出SDK构建中。BigCommerce团队有一个很好的使用React的示例项目-它看起来不同于默认的签出，我们目前正在了解它的多功能性。我担心增加支付选项需要手动完成，这将是相当痛苦的。