[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,按下图添加代码

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


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)

你可能感兴趣的:(android,Cordova,webView,PhoneGap,webapp)