动态设置script标签src加载JS文件后JSON.parse提示data未定义如何解决

问题原因 #

• 第一处错误：loadFileScript.src赋值时错误给变量名加了引号，导致实际请求的是不存在的jsFile文件，而非你拼接好的对应文件名
• 第二处错误：动态插入的<script>标签是异步加载的，代码执行到JSON.parse(data)时，你指定的JS文件还没完成下载和解析，data变量自然未定义

修复方案 #

修改后的代码如下：

<script>
    // 获取URL参数拼接目标文件名
    var jsFile = location.search.substr(1) + ".js";

    // 创建script标签
    var loadFileScript = document.createElement('script');
    loadFileScript.type = "text/javascript";
    // 修复点1：去掉引号，使用变量值作为src
    loadFileScript.src = jsFile;
    // 修复点2：等脚本加载完成后再执行后续逻辑
    loadFileScript.onload = function() {
        // 解析并使用data变量
        var mySample = JSON.parse(data);
        populateHTML(mySample);
    }
    // 可选：添加加载失败处理逻辑
    loadFileScript.onerror = function() {
        console.error('JS文件加载失败，请检查URL参数是否正确');
    }
    document.head.appendChild(loadFileScript);
    
    function populateHTML(mySample) {
        // 填充页面的逻辑写在这里
    }
</script>

额外说明 #

如果你的三个JS文件只是用来存储JSON数据，更推荐直接把文件改成.json后缀，用fetch请求加载数据，不需要靠全局变量传递内容，可维护性更高，也不会有全局变量污染的问题。

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