从外部源动态更改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);