从外部js脚本触发function进入Vue

Question

通过这种方式，在挂钩内有一个脚本加载到我的 Vue 应用程序中：

let recaptchaScript = document.createElement("script");
recaptchaScript.setAttribute("src", "https://sso.****.com.co/v3/****.main.js");
document.body.append(recaptchaScript);

脚本加载了，但是有一个function注入到window object。

目前，当我需要使用 function 时，我会这样做：

mounted() {
  let recaptchaScript = document.createElement("script");
  recaptchaScript.setAttribute("src", process.env.VUE_APP_TAPIT_SSO_URL);
  document.body.append(recaptchaScript);
  this.$nextTick(() => {
    setTimeout(() => {
      window.ssoApp.configApp(TAPIT_SSO_CONFIG);
    }, 1500);
  });

我想摆脱 setTimeOut，但我还没有弄清楚如何等待脚本执行并将 object 函数 (ssoApp) 注入 window object 而不使用计时器。 有什么办法吗？ 我几乎尝试了一切。

Answer 1

该元素应同时具有src和onload属性。 最后设置源，这样所有可以同步完成的事情都在开始加载之前完成。

mounted() {
  let recaptchaScript = document.createElement("script");
  document.body.append(recaptchaScript);
  recaptchaScript.onload = () => window.ssoApp.configApp(TAPIT_SSO_CONFIG);
  recaptchaScript.src = process.env.VUE_APP_TAPIT_SSO_URL;
}