Question

我遇到了以编程方式引用javascript文件的问题一个javascript文件。通常我会在html页面中引用它，但在这种情况下不能，因为文件的目录位置仅在运行时可用。我已经查看了几个关于这个主题的帖子，但截至目前为止还没有找到任何有效的帖子。以下是4个文件的代码片段：

index.html为标头标签分配一个ID，并引用两个名为scriptFile.js的javascript文件中的第一个。
scriptFile.js，是所有新用户的全局数据文件。
第二个文件，也称为scriptFile.js，是在运行时为每个用户创建的用户特定数据文件。第二个javascript文件包含特定于单个用户的数据，位于与index.html scriptFile.js不同的目录中，但在结构上与第一个scriptFile.js相同。在这两种情况下，文件都包含一个返回数组对象的函数。
最后一个文件是index.js。其目的是以编程方式引用上面标识的第二个scriptFile.js文件。
当index.js运行时，scripts.length = 2的值就是它应该是的。 scripts [0] .getAttribute（'id'）和 scripts [0] .getAttribute（'src'）都正确输出。但是，尽管脚本[1] .getAttribute（'id'）输出正确 id =“scriptOneID”，脚本[1] .getAttribute（'src'）输出为null，这显然是不正确的。第二个问题是 scriptOneID.enabled属性的数据输出为true，应该输出为false。这告诉我 object = loadData（）语句引用index.html scriptFile.js中的数据，而不是 index.js userNumber / 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

Answer 1

您的问题是脚本加载时间问题。换句话说，这是一个异步问题。

这些天的Javascript很快。真的很快你的脚本最后一次调用＆＃34; loadData＆＃34;在你注入头部的脚本被加载之前很久。因此，您正在访问＆＃34; loadData＆＃34;的原始版本。两次。

只是澄清我对＆＃34;通知＆＃34;的评论。向index.js文件中添加这样的函数（作为示例）：

function populateObj() {
    object = loadData();
}

然后在注入脚本的底部添加：

populateObj();

那也是一切。当注入的脚本完成加载并执行你的＆＃34;对象＆＃34;全局变量将包含正确的数据。

Answer 2

JQuery有一个在页面加载后随时加载脚本的功能。

看起来像这样：

 $.getScript("yourscripttoload.js", function(){
    console.log("Script loaded and executed.");
  });

也许看一下，看看它是否会适合你的情况。

Answer 3

这是一个完整的poc解决方案，关于如何使用不需要jQuery的回调函数以编程方式从javascript文件中引用javascript文件。它基于这样的前提：在页面加载期间将运行相同的脚本文件，然后在运行时期间从不同的位置再次运行不同的数据。以下解决方案替换了上例中的index.js文件。

// global declarations & assignments
var head = document.getElementById("headID");
var script = document.createElement("script");
var userNumber = sessionStorage.getItem("userNumber");
var scriptPath = userNumber + "/scriptFile.js";

// call back function
function loadScript(scriptPath, callback)
{
  script.id = "scriptOneID";
  script.type = "text/javascript";
  script.src = scriptPath;
  script.async = false;
  script.defer = false;
  // bind the load event to the callback function             
  script.onreadystatechange = callback;
  script.onload = callback;
  // append the script to the page header
  head.appendChild(script);
};

// place the code that you want to run inside an anonymous function
var anonymousFunction = function()
{
  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 = "1234567890/scriptFile.js" where userNumber = "1234567890"
  };

  object = loadData(); // assign the data in loadData function to an object array
  console.log("print test value: " + object[1].enabled ); // output =  false this is correct
};

// execute the loadScript function
loadScript( scriptPath, anonymousFunction );

以编程方式在运行时引用javascript文件

3 个答案: