在運行時以編程方式引用javascript文件

Question

我在以編程方式從javascript文件引用javascript文件時遇到問題。 通常，我只會在html頁面中引用它，但在這種情況下不能引用，因為文件的目錄位置僅在運行時可用。 我已經檢查了關於該主題的幾篇文章，但到目前為止仍找不到任何有效的方法。 以下是來自4個文件的代碼段：

index.html為header標記分配一個ID，並引用兩個JavaScript文件（稱為scriptFile.js）中的第一個。
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'）都正確輸出。 但是，當scripts [1] .getAttribute（'id'）正確輸出為id =“ scriptOneID”時，scripts [1] .getAttribute（'src'）輸出為null顯然是錯誤的。 第二個問題是scriptOneID.enabled屬性的數據在應輸出為false時輸出為true。 這告訴我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

您的問題是腳本加載時間問題。 換句話說，這是一個異步問題。

這些天的Java語言速度很快。 真快。 在注入到頭部的腳本加載之前，您的腳本就到達了對“ loadData”的最后一次調用。 因此，您將兩次訪問“ loadData”的原始版本。

只是為了澄清我對“通知”的評論。 向您的index.js文件添加這樣的功能（作為示例）：

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

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

populateObj();

這就是全部。 當注入的腳本完成加載並執行后，您的“對象”全局變量中將包含正確的數據。

Answer 2

JQuery具有在頁面加載后隨時加載腳本的功能。

看起來像這樣：

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

也許調查一下，看看它是否會在您的情況下起作用。

Answer 3

這是關於如何使用不需要jQuery的回調函數從javascript文件中以編程方式引用javascript文件的完整poc解決方案。 基於這樣的前提，即在頁面加載期間將運行相同的腳本文件，然后在運行期間從具有不同數據的不同位置再次運行該腳本文件。 以下解決方案替換了上面示例中的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 個解決方案

解決方案1
2 已采納 2017-04-14 16:28:50

解決方案2
1 2017-04-14 16:29:44

解決方案3
-1 2017-04-16 17:18:20

在運行時以編程方式引用javascript文件

問題描述

3 個解決方案

解決方案1 2 已采納 2017-04-14 16:28:50

解決方案2 1 2017-04-14 16:29:44

解決方案3 -1 2017-04-16 17:18:20

解決方案1
2 已采納 2017-04-14 16:28:50

解決方案2
1 2017-04-14 16:29:44

解決方案3
-1 2017-04-16 17:18:20