javascript - 从外部源动态更改 javascript 变量

Question

我有两个文件 data1.js 和 data2.js data1.js 有一个变量，如

var rows = ['g1', 'g2'];

data2.js 有一个变量，如

var rows = ['g1', 'g2', 'g3', 'g4'];

最初，我正在使用加载 data1.js

<script id="datascript" type="text/javascript" src="data1.js"></script>

但是，在单击按钮时，我正在加载 data2.js，希望它能够加载其内容（即更新变量行）：

onclick="datascript.src='data2.js';alert(rows);"

但是，我的 rows 变量不会更新。我错过了什么？

谢谢

Answer 1

问题是您试图在浏览器下载和执行第二个 JS 文件之前rows读取变量的值。要解决这个问题：

使用jQuery.getScript()- http://api.jquery.com/jQuery.getScript/ -在脚本下载并执行后提供回调。

代码：

$('#datascript').remove();
$.getScript("data2.js", function(data, textStatus, jqxhr) {
   alert(rows);
});

或者，如果你想坚持使用纯 JS，你可以这样做：

参考：http ://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

// remove previous script element
var sElem = document.getElementById('datascript')
sElem.parentNode.removeChild(sElem);

// insert new script
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.id = 'datascript';
newScript.onload= function() {
   alert(rows);
};
newScript.src = 'data2.js';
document.getElementsByTagName("head")[0].appendChild(newScript);