javascript – 使用phantomjs在本地文件上使用extjs代理进行ajax调用

我有一个基本的EXT JS商店,它使用代理来访问本地json文件.

例如

...
proxy: {
    type: 'ajax',
    api: {
        read: 'data/mydata.json'
    },
    reader: {
        type: 'json',
        root: 'datas',
        successproperty: 'success'
    }
} 
...

我想用Maven,Jasmine和PhantomJS用Atlassian Bamboo(我的CI服务器)构建和测试我的项目.

当我在本地执行PhantomJS时,如下所示：

$phantomjs "c:\phantomjs-1.6.1\examples\run-jasmine.js" run-tests.html

我得到以下输出：

'waitFor()' finished in 422ms.
 4 specs, 2 failures in 0.075s

发生这种情况是因为PhantomJS无法使用file：//协议为EXT JS代理加载本地文件.

我正在关注this示例,我想知道是否可以模拟我的代理响应,以便我可以在本地(在我的Bamboo服务器上)使用测试html文件的PhantomJS,而不是必须在Apache等Web服务器中托管项目(我将不得不使用Maven管理外部依赖).

如果没有,是否有任何其他机制(内置于Jasmine,PhantomJS或其他),我可以使用它来实现这一目标？

解决方法:

从文件系统加载时,实际上可以使用PhantomJS进行XHR！

直接从the PhantomJs wiki：

--web-security=[yes|no] disables web security and allows cross-domain XHR (default is yes)

另见this issue report for 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.

我没有看到与提到的网络安全开关有关的任何内容.也许他们使用自定义的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作为启动参数,谷歌Chrome在开发过程中从文件系统运行我的webapp,它可以在那里运行(启动Chrome时不必运行其他Chrome进程).
Chrome会显示一条警告消息,指出您使用的是不受支持的选项(顶部的黄色通知栏).

但是,为了在这样的设置中工作,我需要一个额外的Ext.Connection补丁来解决两个问题：
(1)加载文件系统资源时,xhr.status始终为0. Ext不认为此状态代码成功.当Ext在PhantomJs中运行时,有专门用于处理此问题的代码 – 这就是它应该在那里工作的原因.

(2)当URL包含查询字符串时,Chrome无法加载文件系统资源.在文件系统模式下,我重写Connection类以去除所有url参数.

javascript – 使用phantomjs在本地文件上使用extjs代理进行ajax调用

相关推荐