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