Vue JS应用嵌入Marketo Form出现MktoForms2未定义报错如何解决

核心报错原因 #

你在created钩子中动态注入的Marketo脚本是异步加载的，脚本下载、解析、执行并在全局挂载MktoForms2对象需要一定时间。如果用户在脚本加载完成前点击按钮触发createForm方法，此时全局还没有生成MktoForms2对象，就会触发MktoForms2 is not defined报错。

修复方案 #

第一步：新增脚本加载状态标记 #

在data中新增加载状态变量，监听脚本加载完成事件更新状态：

data() {
  return {
    // 标记Marketo脚本是否加载完成
    isMarketoLoaded: false
  }
},
created() {
  const scriptTag = document.createElement('script');
  scriptTag.src = "//app-ab00.marketo.com/js/forms2/js/forms2.min.js";
  scriptTag.setAttribute('charset', 'utf-8');
  // 脚本加载完成后更新状态
  scriptTag.onload = () => {
    this.isMarketoLoaded = true;
  };
  // 可选：监听加载失败场景做降级处理
  scriptTag.onerror = () => {
    console.error('Marketo表单脚本加载失败，请检查网络或刷新重试');
  };
  document.head.appendChild(scriptTag);
}

第二步：修改createForm方法加兼容判断 #

调用前先判断脚本是否加载完成，优先从window对象取全局挂载的MktoForms2避免作用域问题：

createForm(){
  // 加载未完成时提前返回，可自定义提示逻辑
  if (!this.isMarketoLoaded || !window.MktoForms2) {
    alert('表单正在加载中，请稍后重试');
    return;
  }
  window.MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057);
}

可选优化 #

触发createForm的按钮可以绑定禁用状态，避免用户重复点击无效请求：

<button @click="createForm" :disabled="!isMarketoLoaded">加载表单</button>

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