從外部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;
}