假设我有
1) 一个HTML文档。
2) 这个HTML文档加载Javascript文件“code.js”,如下所示:
<script src="code.js">
3) 用户点击“code.js”中运行“fetchdata”功能的按钮,
4) “fetchdata”函数如下所示:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4) {
myjsdata = xmlhttp.responseText;
}
}
xmlhttp.open("GET", 'http://www.example.com/data.js', false);
xmlhttp.send(null);
...
现在我如何成功完成以下任务:
我想以某种方式插入/评估我的Javascript,因此“code.js”中的所有函数(包括“fetchdata”)和上面/下面定义的函数都可以访问数据(结构,声明,预先计算的数据值等)。 )在“data.js”中。
(如果这是可能的,那么我可以等到加载实际的JS数据文件,直到用户明确请求它为止。)
答案 0 :(得分:10)
jQuery总能拥有一切:
http://api.jquery.com/jQuery.getScript/
从url加载javascript文件并在全局上下文中执行。
编辑糟糕,没看到你没有使用jQuery。每个人都在使用jQuery ......
只是做:
var scrpt = document.createElement('script');
scrpt.src='http://www.example.com/data.js';
document.head.appendChild(scrpt);
答案 1 :(得分:5)
我认为你应该看看this site
此站点讨论动态加载和回调(带示例) - 您可以在加载后在加载的脚本中调用函数。没有jQUery,只是纯粹的JS。
答案 2 :(得分:2)
这取决于很多因素,但在大多数情况下,您需要一次性加载所有代码/ html / css。它需要的请求更少,因此具有更高的感知性能优势。除非您的代码文件超过几兆字节,否则在用户请求时加载它是不必要的。
除了所有这些之外,修改innerHTML
并通过eval
运行脚本可能非常麻烦且分别存在风险。许多在线参考文献将支持这一点。不要以为,只是因为库正在做这样的事情,它才能安全执行。
也就是说,完全可以加载外部js文件并执行它们。一种方法是将所有代码粘贴到新创建的脚本标记中。您也可以尝试在eval
函数调用中运行代码(尽管不建议这样做。)
address = "testscript.js";
var req = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
if(req == null) {
console.log("Error: XMLHttpRequest failed to initiate.");
}
req.onload = function() {
try {
eval(req.responseText);
} catch(e) {
console.log("There was an error in the script file.");
}
}
try {
req.open("GET", address, true);
req.send(null);
} catch(e) {
console.log("Error retrieving data httpReq. Some browsers only accept cross-domain request with HTTP.");
}