ファイルシステムからロードする場合、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ビルドを使用しています。
UPDATE
このコード フラグメントは、ファイル システムへの 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 がこのようなセットアップで動作するには、2 つの問題を修正するために Ext.Connection に追加のパッチが必要でした: (1)0
ファイル システム リソースをロードするときは常に xhr.status です。Ext は、このステータス コードを とは見なしませんsuccessful
。Ext が PhantomJs で実行されているときにこれを処理する専用のコードがあります。そのため、そこで動作するはずです。
(2) URL にクエリ文字列が含まれている場合、Chrome はファイル システム リソースの読み込みに失敗しました。ファイルシステム モードでは、Connection クラスをオーバーライドして、すべての URL パラメータを取り除きます。