如何使用JavaScript将jQuery导入文档head及$未定义报错问题咨询

• 动态创建的带src属性的script标签加载外部资源是异步行为：你把jQuery的script节点插入文档后，浏览器不会等它下载、解析执行完成，就会立即执行后面插入的自定义脚本，此时jQuery还没挂载到全局window对象上，自然识别不了$符号。
• 即便调整两个script的插入顺序，异步加载的特性也不会改变，jQuery未加载完成前调用$必然会报错。

监听jQuery脚本的load事件，等jQuery加载完成后再执行依赖jQuery的代码即可，修改后的可用代码如下：

function loadJQuery() {
  let jquery = document.createElement('script');
  jquery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js';
  jquery.type = 'text/javascript';
  // 监听jQuery加载完成事件
  jquery.onload = function() {
    // jQuery加载完成后再插入执行依赖代码
    let script = document.createElement('script');
    script.innerHTML = `
      $(document).keydown( function(event) {
        if (event.which == 32) {
          // 阻止空格键默认的滚动页面行为，不需要可以删除
          event.preventDefault();
          alert('hi!ツ');
        }
      });
    `;
    document.head.appendChild(script);
  };
  document.head.appendChild(jquery);
}
loadJQuery();

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