[Phonegap+Sencha Touch] 移动开发76 让cordova app访问远端网站也能调用cordova插件功能

原文链接：http://blog.csdn.net/lovelyelfpop/article/details/50735395

我相信，应该会有一些cordova开发者想过实现下面这种app：

使用cordova制作一个外壳app，用于浏览服务端部署的网站，这样当服务器上网站升级后，这个cordova app可以立即访问最新版。而不是每次改了一点点功能都要打包上架app。

我最近也在实现这样的功能。因为网站是在远端服务器上，而cordova.js、cordova_plugins.js和上所有cordova插件的js是在app安装包里内置的（打包外壳app的时候已经添加的大部分插件），所以我在远端网站的index.html上添加下面的js引用，来加载cordova插件：

<script src="file:///android_asset/www/cordova.js" type="text/javascript" charset="UTF-8"></script>

不过遇到了一个错误：

Not allowed to load local resource: file:///android_asset/www/cordova.js

意思是http协议下禁止通过file://方式访问本地的文件。

不过如果cordova app就是访问的file://android_asset/www/index.html的话，加载其它file://资源是没问题的。

这是webview的一种安全机制。

解决办法是，通过拦截webview的请求，实现加载本地js，具体如下：

1、打开CordovaLib\src\org\apache\cordova\engine\SystemWebViewClient.java，按下图添加代码

private static final String INJECTION_TOKEN = "http://injection/";

if(url != null && url.contains(INJECTION_TOKEN)) {
String assetPath = url.substring(url.indexOf(INJECTION_TOKEN) + INJECTION_TOKEN.length(), url.length());
try {
WebResourceResponse response = new WebResourceResponse(
"application/javascript",
"UTF8",
view.getContext().getAssets().open(assetPath)
);
return response;
} catch (IOException e) {
e.printStackTrace(); // Failed to load asset file
return new WebResourceResponse("text/plain", "UTF-8", null);
}
}

注意：如果你用了cordova-plugin-crosswalk-webview插件，则需要打开

cordova-plugin-crosswalk-webview\platforms\android\src\org\crosswalk\engine\XWalkCordovaResourceClient.java

修改shouldInterceptLoadRequest方法。

2、再把在index.html中的cordova.js的引用路径换成下面的：

<script src="http://injection/www/cordova.js" type="text/javascript" charset="UTF-8"></script>

思路是：既然不允许访问file://，那我就设法改为http://，然后拦截webview的请求，对http://injection/开头的请求，手动返回对应文件的具体内容。

这样，重新打包后的cordova app就解决了访问远端网站时，加载本地js报错的问题了。

暂时只解决了Android上的Not allowed to load local resource，iOS还没研究。

欢迎加入Sencha Touch + Phonegap交流群

1群：194182999 (满)

2群：419834979

共同学习交流（博主QQ：479858761）