如何在通过编程方式添加jQuery到DOM后继续执行.js代码？

当你通过动态创建<script>标签的方式加载jQuery时，由于脚本加载是异步的，直接在加载代码后写依赖jQuery的逻辑会失败——因为此时jQuery还未完成下载和执行。下面是几种可靠的解决方式：

方法1：利用脚本的onload事件直接执行代码 #

在动态创建的script标签上绑定onload事件，该事件会在jQuery脚本加载并执行完成后触发，此时就能安全使用jQuery了：

// 动态加载jQuery的自执行函数
(function() {
  const jqueryScript = document.createElement('script');
  // 替换为你需要的jQuery版本地址
  jqueryScript.src = 'https://code.jquery.com/jquery-3.7.1.min.js';
  
  // 脚本加载完成后执行依赖代码
  jqueryScript.onload = function() {
    // 这里可以放心使用jQuery
    $(window).on('load', function() {
      console.log('jQuery已就绪，开始执行业务代码');
      // 你的业务逻辑写在这里
      $('body').css('background-color', '#f0f0f0');
    });
  };

  // 处理加载失败的情况
  jqueryScript.onerror = function() {
    console.error('jQuery加载失败，请检查地址是否正确');
  };

  document.head.appendChild(jqueryScript);
})();

方法2：封装初始化函数，在加载完成后调用 #

把依赖jQuery的逻辑封装成独立函数，在onload事件中调用，代码结构更清晰，便于维护：

// 封装依赖jQuery的初始化逻辑
function initMyApplication() {
  $(window).on('load', function() {
    // 这里写你的业务代码
    $('#app-container').append('<h1>应用初始化完成</h1>');
  });
}

// 动态加载jQuery
(function() {
  const jqueryScript = document.createElement('script');
  jqueryScript.src = 'https://code.jquery.com/jquery-3.7.1.min.js';
  
  // 加载完成后调用初始化函数
  jqueryScript.onload = initMyApplication;
  jqueryScript.onerror = () => console.error('jQuery加载失败');

  document.head.appendChild(jqueryScript);
})();

方法3：用Promise封装加载过程（现代JS写法） #

如果你的项目使用现代JavaScript特性，可以用Promise封装jQuery的加载过程，支持链式调用或async/await，写法更优雅：

// 封装加载jQuery的Promise函数
function loadjQuery() {
  return new Promise((resolve, reject) => {
    const jqueryScript = document.createElement('script');
    jqueryScript.src = 'https://code.jquery.com/jquery-3.7.1.min.js';
    
    jqueryScript.onload = () => resolve(window.jQuery);
    jqueryScript.onerror = () => reject(new Error('jQuery加载失败'));
    
    document.head.appendChild(jqueryScript);
  });
}

// 方式A：链式调用
loadjQuery().then($ => {
  $(window).on('load', function() {
    console.log('jQuery版本：', $.fn.jquery);
    // 业务逻辑
  });
}).catch(err => {
  console.error(err.message);
});

// 方式B：async/await（需在async函数中使用）
async function initApp() {
  try {
    const $ = await loadjQuery();
    $(window).on('load', function() {
      // 业务逻辑
    });
  } catch (err) {
    console.error(err);
  }
}
initApp();

关键原理 #

动态加载脚本是异步操作，浏览器会在后台下载脚本，同时继续执行后续代码。只有当脚本下载完成并执行后，onload事件才会触发，此时window.jQuery和$变量才会被定义，依赖它们的代码才能正常运行。

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