Javascript：动态 <script> src 值和 JSON.parse 出错

Question

我正在尝试将选定的JS文件动态加载到我的HTML文件中，其中的JS文件内容将用于填充HTML。

目前，我有一个3个不同的JS文件(sampleFile.JS、sampleFile2.JS和sampleFile3.JS(来模拟3个JSON文件。所有三个文件都包含一个data常量变量。

sampleFile2.js示例

const data = '[{"name" : "jane", "age": "twenty"}, {"name": "caleb", "age": "eight"}]'

在main.html中的<script>中，我想根据URL中的参数将这3个JS文件中的一个加载为脚本src值。

例如，如果我的url以"？sampleFile2'，我的main.html文件中的脚本将是<script type="text/javascript" src="sampleFile2.js">。

然后，我使用mySample = JSON.parse(data);提取data常量变量来填充HTML屏幕，但在这一步中似乎总是出现错误，并且没有填充任何内容。

main.html
<script>附加在</body>之前

<script>
// Get the URL value and identify file
var jsFile = location.search.substr(1) + ".js";

// Create <script> in HTML header
var loadFileScript = document.createElement('script');
loadFileScript.type = "text/javascript";
loadFileScript.src = "jsFile";
document.head.appendChild(loadFileScript);
// Extract content from sampleFile
var mySample = JSON.parse(data);
// Populate HTML using sampleFile contents
populateHTML(mySample);

function populateHTML(mySample) {
// Do stuff to populate HTML here
}
</script>

我的限制是我只能使用HTML和Javascript。当我进行故障排除时，我获得所需的<script>没有问题。然而，在JSON.parse中，我不断收到一个错误：

未捕获引用错误：数据未在main.html中定义？sampleFile2.

有人知道如何纠正吗？

Answer 1

感谢评论者@user2740650，根据www.stackoverlow.com/a/1623105/2740650调整了我的脚本代码，现在它可以工作了！

<script>
// Get the URL value and identify file
var jsFile = location.search.substr(1) + ".js";

// Create <script> in HTML header
var loadFileScript = document.createElement('script');
loadFileScript.type = "text/javascript";
document.head.appendChild(loadFileScript);
// Use function on load
loadFileScript.onload = function() {
var mySample = JSON.parse(data);
populateHTML(mySample);
};
loadFileScript.src = jsFile;

function populateHTML(mySample) {
// Do stuff to populate HTML here
}
</script>