我有一个网站,当用户点击链接时,使用XMLHttpRequest加载信息。系统运行良好,但我希望能够执行在此过程中收集的JavaScript。
这是一个问题,因为我想按需“下载”脚本,而不是在加载页面时全部加载它们。
谢谢你的帮助
我有一个网站,当用户点击链接时,使用XMLHttpRequest加载信息。系统运行良好,但我希望能够执行在此过程中收集的JavaScript。
这是一个问题,因为我想按需“下载”脚本,而不是在加载页面时全部加载它们。
谢谢你的帮助
我相信推荐的解决方案是这样的:
function include(scriptUrl)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", scriptUrl);
xmlhttp.onreadystatechange = function()
{
if ((xmlhttp.status == 200) && (xmlhttp.readyState == 4))
{
eval(xmlhttp.responseText);
}
};
xmlhttp.send();
}
或类似的东西。
但是,要小心这种方法。它很容易受到跨站脚本攻击,这可能会让您(以及您的用户)面临各种各样的肮脏行为。你需要采取适当的预防措施。
我相信推荐的解决方案是这样的:
function include(scriptUrl)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", scriptUrl);
xmlhttp.onreadystatechange = function()
{
if ((xmlhttp.status == 200) && (xmlhttp.readyState == 4))
{
eval(xmlhttp.responseText);
}
};
xmlhttp.send();
}
或类似的东西。
但是,要小心这种方法。它很容易受到跨站脚本攻击,这可能会让您(以及您的用户)面临各种各样的肮脏行为。你需要采取适当的预防措施。
您可以使用以字符串形式运行脚本
eval()
不过我建议你添加新的
<script src='..'></script>
到您的文档并有一个回调,将在下载时调用。有很多utils和jquery插件。
最近我找到了答案(它适用于Chrome,在其他浏览器中未经测试)。
您可以创建dataURL字符串并将其放入 src
的属性 script
元件。
var xhr = XMLHttpRequest(),
doc = document;
xhr.open('GET', pathToJSFile, true);
xhr.onload = function () {
var script = doc.createElement('script'),
base64 = 'data:application/javascript;base64,';
try {
base64 += btoa(data.responseText);
} catch (e) {
// script file may contain characters that not included in Latin1
var symbols = data.responseText.split('');
for (var i = 0, l = symbols.length; i < l; i++) {
var symbol = symbols[i];
// here we are trying to find these symbols in catch branch
try {
btoa(symbol);
} catch (e) {
var code = symbol.charCodeAt(0).toString(16);
while (code.length < 4) {
code = '0' + code;
}
// replace original symbol to unicode character
symbols[i] = '\\u' + code;
}
}
// create new base64 string from string with replaced characters
base64 += btoa(symbols.join(''));
} finally {
script.src = base64;
// run script
doc.body.appendChild(script);
}
};
xhr.send();
您可以订阅xhr.onprogress以显示进度条。
更新。您可以将脚本文件下载为blob,然后创建blob-url。
var xhr = XMLHttpRequest(),
doc = document;
xhr.responseType = 'blob';
xhr.open('GET', pathToJSFile, true);
xhr.onload = function () {
var script = doc.createElement('script'),
src = URL.createObjectURL(xhr.response);
script.src = src;
doc.body.appendChild(script);
};
xhr.send();
我在移动网络项目上遇到了挑战,神奇的是设置了“overrideMimeType”。 这已经过验证可以在Android 4.1到Android 6.0上运行。
var head = document.getElementsByTagName('head');
var injectedScript = document.createElement('script');
head[0].appendChild(injectedScript);
var myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
injectedScript.innerHTML = myRequest.responseText;
//run a function in the script to load it
}
};
function start(){
myRequest.open('GET', 'javascript-url-to-download', true);
myRequest.overrideMimeType('application/javascript');
myRequest.send();
}
start();
您需要使用eval来解析XHR中的javascript,请注意,如果您对javascript的源代码没有绝对的信任,那么这非常危险。
您将使用eval(param),参数将是请求的响应。您请求JavaScript的方法很荒谬,因为它只会延迟代码运行。只需使用功能和事件。