让混合 app访问远端网站也能调用cordova插件功能（ionic cordova）

- 日理万妓 2022-05-28 06:43 172阅读 0赞

参考地址：https://blog.csdn.net/lovelyelfpop/article/details/50735395

感谢上面链接博主文章；

贴出部分关键点：

在远端网站的index.html上添加下面的js引用，来加载cordova插件：

不过遇到了一个错误：

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/";（定义在下面方法上面）

public WebResourceResponse **shouldInterceptRequest** ( WebView view , String url ) \{

在该内加入如下代码

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);
                }
            }

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

以上为帖子内关键内容

\--------------------------------------分割线----------------------------------------------------

目前项目环境为IONIC

步骤：

1.首先按照以上博主链接配置好cordova.js文件的引用地址；

2.参照ionic或者cordova官网安装相应插件；

3根据插件xxx.js命名文件调用即可：比如

{
        "id": "cordova-plugin-camera.Camera",
        "file": "plugins/cordova-plugin-camera/www/CameraConstants.js",
        "pluginId": "cordova-plugin-camera",
        "clobbers": [
          "Camera"
        ]
      }

navigator.camera.getPicture(onSuccess, onFail,
    {
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        popoverOptions: new CameraPopoverOptions(300, 300, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY)
    });

如上调用方式参照官方文档即可；

4，终极方法，通过以上方式调用不到，则用如下方式：

cordova.exec(onSuccess, onFail, "SocialSharing", "share", ['Optional message', 'Optional title', ['http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg','https://www.google.nl/images/srpr/logo4w.png'],'http://www.myurl.com');

直接通过如上方式调用即可；（格式如上，具体调用哪个按照插件里面的定义规则来就行）

5.贴上完整调用的页面；

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="http://injection/www/cordova.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
    	function getCamera(){
    		navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    		    destinationType: Camera.DestinationType.FILE_URI });
    	}
    	function onSuccess(imgdata) {
    	    console.log(imgdata)
    	}
    
    	function onFail(message) {
    	    alert('Failed because: ' + message);
    	}
    	
    	console.info(window.cordova);
    	console.info(navigator);
    	console.info(window);
    	
    	function shareInfo(){
    	    cordova.exec(onSuccess, onFail, "SocialSharing", "share", ['Optional message', 'Optional title', ['http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg','https://www.google.nl/images/srpr/logo4w.png'],'http://www.myurl.com');
    	}
    </script>
    </head>
    <body >
    	This is my html!3333333333333
    	<p>
    	<button οnclick="getCamera()">相机</button>
    	<button οnclick="shareInfo()">分享</button>
    </body>
    </html>

ps:或许也还有其他方式能调用到，欢迎大家一起研究。

中途使用过好多方式：通过日志打印出cordova，navigator等相关信息，然后日志里面相关对象进行操作，以及查看cordova.js文件进行操作。