如何通过JavaScript Script对象加载本地JS文件中的函数？

嘿，这个问题我之前也踩过坑！核心原因其实很直白：你动态创建<script>标签后，浏览器是异步加载这个本地JS文件的——也就是说，你刚设置完src就立刻调用loadData()，这时候脚本还没完成下载和解析，浏览器根本不知道这个函数存在，自然会报“未定义”的错误。

另外还有个容易漏掉的细节：你之前的代码里没把创建好的<script>元素添加到DOM里，浏览器根本不会去加载这个脚本文件！这也是问题的关键之一。

给你两种靠谱的解决方案：

方案一：监听脚本的load事件（现代浏览器推荐） #

等脚本完全加载解析完成后，再调用目标函数：

var x = document.createElement("SCRIPT");
x.type = "text/javascript";
x.src = "file:///C:/scripts/localscript.js";

// 脚本加载完成后再执行函数
x.onload = function() {
    loadData(); // 现在函数已经可以正常调用啦
};

// 必须把脚本添加到DOM中，浏览器才会发起加载请求
document.head.appendChild(x);

方案二：兼容旧版浏览器（比如IE8及以下） #

如果需要兼容老旧浏览器，可以同时监听onreadystatechange事件：

var x = document.createElement("SCRIPT");
x.type = "text/javascript";
x.src = "file:///C:/scripts/localscript.js";

function handleScriptLoad() {
    // 检查IE的就绪状态，确保脚本已加载完成
    if (x.readyState === "complete" || x.readyState === "loaded") {
        loadData();
    }
}

// 绑定两个事件，兼顾现代浏览器和旧IE
x.onload = handleScriptLoad;
x.onreadystatechange = handleScriptLoad;

document.head.appendChild(x);

额外注意事项 #

• 本地文件权限问题：如果是直接用浏览器打开本地HTML文件（file://协议），部分浏览器可能会因为安全限制阻止加载本地JS文件。这时候可以试试用本地服务器运行项目，比如用Node.js的http-server，或者Python的SimpleHTTPServer，用http://协议访问就不会有这个问题了。
• 路径检查：确认localscript.js的路径完全正确，比如大小写是否匹配、斜杠有没有写错（Windows下用/或者\\都可以，但要注意转义）。

内容的提问来源于stack exchange，提问作者Jaime Dolor jr.