如何在不使用jQuery的情况下让Chrome触发script标签的load/onload事件

该问题大多出现在动态创建插入的script标签场景下，Chrome加载已命中本地缓存的脚本时，会跳过标准的onload事件触发逻辑，导致回调不执行，以下是无需依赖jQuery的兼容实现方案：

兼容实现代码 #

function loadScript(url, callback) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  // 统一处理加载完成逻辑
  function handleLoad() {
    // 兼容旧IE和Chrome缓存场景的状态判断
    if (script.readyState && !['loaded', 'complete'].includes(script.readyState)) {
      return;
    }
    // 解绑事件避免重复触发回调
    script.onload = script.onreadystatechange = null;
    callback && callback();
  }

  // 同时监听两个事件覆盖所有加载场景
  script.onload = handleLoad;
  script.onreadystatechange = handleLoad;

  document.head.appendChild(script);
}

使用方法 #

直接调用封装好的方法即可实现稳定的脚本加载回调：

loadScript('目标脚本地址', function() {
  // 脚本加载完成后执行的业务逻辑
  console.log('脚本加载完成');
});

注意事项 #

• 逻辑内置了状态判断和事件解绑操作，可避免同一脚本重复触发回调的问题
• 兼容所有主流浏览器，覆盖Chrome缓存脚本不触发onload的特殊场景
• 若需加载跨域脚本，可按需给script标签添加crossorigin属性适配跨域规则

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