vue 動態加載第三方js回調事件

vue頁面，引入第三方js

需要在加載完遠程js后執行初始化操作。

// 取出Promise中的resolve方法，在sdk onload方法中調用
let isLoad;
const loadPromise = new Promise((resolve, reject) => {
  isLoad = resolve;
});

// 創建script標簽，添加到body
const sdk = document.createElement('script');
sdk.type = 'text/javascript';
sdk.src = 'https://www.xxx.com/sdk.js';

sdk.onload = () => {
  isLoad();
};

document.body.appendChild(sdk);

// vue 代碼
export default {
  mounted() {
    loadPromise.then(() => {
      console.log('sdk加載完成');
      // do something
    });
  }
};

 

 更新：封裝了動態加載js方法，加載多個js方法

// 動態加載js
function dynamicLoadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;

    script.onload = function () {
      resolve(src);
    };
    script.onerror = function () {
      reject(new Error('Failed to load ' + src), script);
    };

    document.body.appendChild(script);
  });
}

// 動態加載多條js
function loadScripts(urls) {
  return Promise.all(urls.map((url) => dynamicLoadScript(url)));
}

const hasLoad = new Promise((resolve) => {
  loadScripts([
    'https:/xxx.js',
    'https:/xxx.js',
    'https:/xxx.js',
  ]).then(() => {
    resolve();
  });
});

export default {
  name: 'component',
  data() {
    return {};
  },
  beforeCreate() { },
  mounted() {
    hasLoad.then(() => {
      console.log('加載完成');
      // do something
    });
  }
};