求助：动态加载外部JS代码后无法运行，如何解决？附代码

嘿，我来帮你排查这个问题～你现在的代码逻辑本身是对的，但可能有几个细节导致脚本没执行，咱们一步步来解决：

先排查基础问题 #

首先打开浏览器的开发者工具（按F12），先确认两个关键点：

• 切换到Network标签，点击按钮后看check.js的请求状态：是不是显示200（成功加载）？如果是404，那就是路径写错了，得先把路径改对。
• 切换到Console标签，有没有红色的报错信息？比如脚本本身有语法错误，或者执行时找不到依赖的元素/变量，这些都会让脚本看起来“没执行”。

针对代码的优化方案 #

方案1：移除async属性（如果不需要异步加载） #

你设置了script.async = true，这个属性会让脚本异步加载，加载完成后立即执行，但如果你的脚本依赖页面中的元素，或者和其他脚本有顺序要求，可能会导致执行时机不对。去掉async后，脚本会按顺序加载执行，更稳妥：

function myFunction() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  // 移除async属性，让脚本同步加载执行
  script.src = 'http://localhost/check.js';
  document.head.appendChild(script); // 用document.head比getElementsByTagName更简洁
}

方案2：添加加载回调，明确控制执行时机 #

给script标签加上onload和onerror回调，既能确认脚本是否加载成功，还能手动触发脚本里的逻辑：

function myFunction() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://localhost/check.js';

  // 脚本加载成功后触发
  script.onload = function() {
    console.log('外部脚本加载完成！');
    // 如果你的check.js里有需要执行的函数，比如runCheck()，可以在这里手动调用
    // runCheck();
  };

  // 脚本加载失败时触发，方便排查问题
  script.onerror = function() {
    console.error('糟了，外部脚本加载失败了！');
  };

  document.head.appendChild(script);
}

方案3：手动调用脚本内的函数 #

如果你的check.js里只是定义了函数，没有自动执行的逻辑，那加载完成后需要手动调用这些函数。比如check.js的内容是：

// check.js
function showMessage() {
  alert('外部脚本执行啦！');
}

那就在onload回调里调用它：

script.onload = function() {
  showMessage(); // 手动触发脚本内的函数
};

额外注意点 #

如果你的页面是用file://协议直接打开的（比如双击HTML文件），加载http://localhost的脚本可能会触发跨域限制，这时候需要用本地服务器（比如XAMPP、Node.js的http-server）打开页面，用http://localhost访问，就能解决跨域问题啦。

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