Hubspot嵌入式表单重复渲染空白占位问题求助

问题根源 #

每次进入组件都重复加载hsforms脚本并调用forms.create，导致旧的表单iframe未被清理，新表单生成后旧iframe残留为空占位，出现重复表单区域。

解决方案 #

以下是修改后的代码，包含三个关键优化：

import { onMounted, onUnmounted, ref } from 'vue'

export default {
  setup() {
    // 保存表单实例，用于卸载时销毁
    const formInstance = ref(null)

    onMounted(() => {
      const targetEl = document.getElementById('content-form')
      // 清空目标容器，避免旧内容残留
      targetEl.innerHTML = ''

      if (window.hbspt?.forms) {
        // 已加载过脚本，直接创建表单
        formInstance.value = window.hbspt.forms.create({
          region: "",
          portalId: "423423423",
          formId: "65363456-456-23g22-3423-g34g3f363g",
          target: "#content-form"
        })
        return
      }

      // 未加载脚本时才创建并加载
      let script = document.createElement('script')
      script.setAttribute('src', 'https://js.hsforms.net/forms/v2.js')

      script.addEventListener("load", () => {
        if (window.hbspt) {
          formInstance.value = window.hbspt.forms.create({
            region: "",
            portalId: "423423423",
            formId: "65363456-456-23g22-3423-g34g3f363g",
            target: "#content-form"
          })
        }
      })

      document.head.appendChild(script)
    })

    onUnmounted(() => {
      // 卸载组件时销毁表单实例，清理iframe
      if (formInstance.value) {
        formInstance.value.destroy()
      }
    })

    return {}
  }
}

关键优化点 #

• 避免重复加载脚本：先检查window.hbspt.forms是否存在，已存在则直接创建表单，无需重复加载脚本。
• 清理目标容器：创建表单前清空目标元素的内容，确保旧的iframe被移除。
• 卸载时销毁表单：保存forms.create返回的实例，在onUnmounted中调用destroy()方法，彻底清理表单的DOM元素和相关资源。

额外验证 #

如果问题仍存在，可检查：

• 目标容器#content-form是否在组件卸载时被正确销毁（比如是否是组件内的元素，而非全局DOM）。
• 确保没有其他地方重复调用表单创建逻辑。

内容的提问来源于stack exchange，提问作者Jose