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

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

感谢上面链接博主文章；

贴出部分关键点：

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

 
  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的引用路径换成下面的：

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

以上为帖子内关键内容

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

目前项目环境为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 onclick="getCamera()">相机</button>
	<button onclick="shareInfo()">分享</button>
</body>
</html>

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

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

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

猜你喜欢