动态加载脚本

2018-03-18

有时会需要动态加载 js 文件，偶尔还会有同步加载的需要（比如在个别环境需要加载一些依赖，才可以往下执行），所以总结了一些方法。

异步加载

异步加载比较简单，不阻塞页面的加载，也没有跨域问题。直接生成一个 script 标签即可。

const script = document.createElement('script');
script.setAttribute('src', 'script.js');
document.head.appendChild(script);

但有时会需要在脚本加载完成后执行某些函数，这时可以写一个简单的 loadjs 函数：

或者直接使用 loadjs 包，支持更多功能：GitHub npm

function loadjs (url, callback) {
  const script = document.createElement('script');

  if (script.readyState) {  //IE
    script.onreadystatechange = function () {
      if (
        script.readyState == "loaded" ||
        script.readyState == "complete"
      ) {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {  //Others
    script.onload = function () {
      callback();
    };
  }

  script.setAttribute('src', url);
  document.head.appendChild(script);
}

然后传入地址和回调函数

loadjs('script.js', function() {
  console.log('loaded');
})

同步加载

使用 Ajax 同步载入解决，会阻塞页面进程，会有跨域问题。如非必要，尽量不使用。

const xhr = new XMLHttpRequest();

xhr.open('get', '/script.js', false);
xhr.send();

if (xhr.status === 200) {
  const script = document.createElement('script');
  
  // 外部脚本会在以下两行均执行完成后执行
  script.text = xhr.responseText;
  document.head.appendChild(script);
}

使用 jQuery，同样有跨域问题。

// 外部脚本会在此函数位置执行
$.ajax({
  type: 'get',
  url: 'script.js',
  async: false
})