从文件系统加载时,实际上可以使用 PhantomJS 执行 XHR!
直接来自PhantomJs wiki:
--web-security=[yes|no] disables web security and allows cross-domain XHR (default is yes)
另请参阅PhantomJs 的此问题报告,它可能会对该主题有所了解。
Sencha 的 'sencha create jsb' 命令使用 PhantomJs(Ext.Loader 使用 XHR),它支持从文件系统加载。
name: 'app-entry',
alias: 'a',
description: 'The file or URL path to your application\'s HTML entry point',
结帐[senchasdktools]/compat/command/src/modules/GenerateJSB.js
和[senchasdktools]/compat/command/scripts/phantomjs-jsb.js
.
不过,我没有看到与上述web-security
开关相关的任何内容。也许他们使用自定义 phantomJs 构建。
更新
此代码片段允许向文件系统发出 XHR 请求。用最新版本的 phantomJs (1.6.1/Windows) 测试:
var page = new WebPage();
page.settings.localToRemoteUrlAccessEnabled = true;
UPDATE2
这是一个工作示例。
将所有内容放在同一个文件夹中,添加一个test.txt
包含一些内容的文件,然后运行
phantomjs script.js test.html
phantomjs 脚本(script.js):
var fs = require('fs');
var appLocation = phantom.args[0];
var page = new WebPage();
page.settings.localToRemoteUrlAccessEnabled = true;
page.settings.ignoreSslErrors = true;
page.onConsoleMessage = function(message, url, lineNumber) {
console.log((url ? url + " " : "") + (lineNumber ? lineNumber + ": " : "") + message);
};
page.onError = function (msg, trace) {
console.log(msg);
trace.forEach(function(item) {
console.log(' ', item.file, ':', item.line);
});
phantom.exit(1);
};
if (!/^file:\/\/|http(s?):\/\//.test(appLocation)) {
appLocation = 'file:///' + fs.absolute(appLocation).replace(/\\/g, '/');
}
page.open(appLocation, function(status) {
if (status !== 'success') {
error("Failed opening: '" + appLocation + "'. Please verify that the URI is valid");
}
page.evaluate(function() {
window.onerror = function(message, url, lineNumber) {
console.log((url ? url + " " : "") + (lineNumber ? lineNumber + ": " : "") + message);
};
});
timer = setInterval(function() {
console.log('Timeout!');
phantom.exit(1);
}, 2000);
});
html文件(test.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="x-border-box x-strict">
<head>
<title>Test</title>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
try {
xhr.open('GET', 'test.txt', false);
xhr.send(null);
} catch (e) {
console.log('cross origin?');
}
console.log('status', xhr.status);
console.log('response', xhr.responseText);
</script>
</head>
<body class="x-body">
</body>
</html>
Chrome 和 --disable-web-security 和 ExtJs
我实际上是--disable-web-security
在开发过程中使用 Google Chrome 的启动参数来从文件系统运行我的 webapp,并且它在那里工作(启动 Chrome 时必须运行其他 Chrome 进程)。Chrome 将显示一条警告消息,指出您正在使用不受支持的选项(顶部的黄色通知栏)。
然而,为了让 Ext 在这样的设置中工作,我需要对 Ext.Connection 附加一个补丁来解决两个问题: (1) xhr.status 总是0
在加载文件系统资源时出现。分机不将此状态代码视为successful
. 当 Ext 在 PhantomJs 中运行时,有专门的代码来处理这个问题——这就是它应该在那里工作的原因。
(2) 当 URL 包含查询字符串时,Chrome 加载文件系统资源失败。在文件系统模式下,我覆盖 Connection 类以去除所有 url 参数。