我在以编程方式引用 javascript 文件时遇到问题 一个 JavaScript 文件。通常我只会在 html 页面中引用它，但在这种情况下不能，因为文件的目录位置仅在运行时可用。我已经查看了有关此主题的几篇文章，但到目前为止尚未找到任何有效的内容。以下是 4 个文件的代码片段:
index.html 为 header 标记分配一个 ID，并引用两个名为 scriptFile.js 的 javascript 文件中的第一个。
scriptFile.js，是所有新用户的全局数据文件。
第二个文件也称为 scriptFile.js，是在运行时为每个用户创建的用户特定数据文件。第二个 javascript 文件包含特定于单个用户的数据，位于与 index.html scriptFile.js 不同的目录中，但在结构上与第一个 scriptFile.js 相同。在这两种情况下，文件都包含一个返回数组对象的函数。
最后一个文件是index.js。其目的是以编程方式引用上面标识的第二个 scriptFile.js 文件。
当index.js运行时，scripts.length的值= 2，这是它应该的值。脚本[0].getAttribute('id') 和 script[0].getAttribute('src') 都正确输出。但是，虽然 script[1].getAttribute('id') 正确输出为 id = "scriptOneID"，scripts[1].getAttribute('src') 输出为 null，这显然是不正确的。第二个问题是 scriptOneID.enabled 属性的数据输出为 true，而它应该输出为 false。这告诉我 object = loadData() 语句引用的是index.html scriptFile.js 中的数据，而不是 index.js 用户编号/scriptFile.js。这已在测试中得到验证。
这里是代码片段。对于如何纠正这个问题的建议或想法表示赞赏。谢谢...
// 1. index.html page
<head id="headID">
<script id="scriptZeroID" type="text/javascript" src="scriptFile.js">
</script>
// 2. scriptFile.js
function loadData()
{
var object = [{ property: 0, enabled: true }];
return object;
};
// 3. userNumber/scriptFile.js
function loadData()
{
var object = [{ property: 0, enabled: false }];
return object;
};
// 4. index.js page
//global declarations and assignments
var object = new Array;
object = loadData(); // assign the data in loadData function to an object array
// local declarations and assignments
var head = document.getElementById("headID");
var script = document.createElement("script");
var userNumber = sessionStorage.getItem("userNumber");
var scriptPath = userNumber + "/scriptFile.js";
script.id = "scriptOneID";
script.type = "text/javascript";
script.scr = scriptPath;
head.appendChild( script );
var scripts = document.getElementsByTagName("script");
console.log("script: " + scripts.length); // output = 2
for (var i = 0; i < scripts.length; i++)
{
console.log("output: " + scripts[i].getAttribute('id') + " / " + scripts[i].getAttribute('src'));
// output for scripts[0]: id = "scriptZeroID", scr = "scriptFile.js"
// output for scripts[1]: id = "scriptOneID", scr = null
};
object = loadData(); // assign the data in loadData function to an object array
console.log("print test value: " + object[1].enabled ); // output = true // this is incorrect, it should = false
最佳答案
您的问题是脚本加载时间问题。换句话说，这是一个异步问题。
现在的 JavaScript 速度很快。真的很快。您的脚本在加载注入(inject)头部的脚本之前很久就到达了对“loadData”的最后一次调用。因此，您将访问“loadData”的原始版本两次。
只是为了澄清我对“通知”的评论。将这样的函数(作为示例)添加到您的 index.js 文件中:
function populateObj() {
object = loadData();
}
然后在注入(inject)脚本的底部添加:
populateObj();
这就是全部了。当注入(inject)的脚本完成加载并执行时，您的“对象”全局变量将包含正确的数据。
关于javascript - 在运行时以编程方式引用 JavaScript 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43415235/