当html+js在服务端时,app直接访问服务端网页显示,是可行的,但是,会遇到部分问题,如上传控件无法调用,拍照等通过navigator调用的是可以的,但是,上传需要用到var options = new FileUploadOptions();会找不到.
注,需要嵌入网页显示,需要在config.xml中增加如下配置
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
完整的即为
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<access origin="*" />
<access origin="http://*/*" />
<access origin="https://*/*" />
不加的话会跳转到手机浏览器显示.
若html+js都在APP中,那么不会遇到以上问题,但是,会考虑到跨域问题(上面方法不会出现跨域问题).
因此,采用两者兼容的方式,手机页面(父页面)通过iframe嵌入web页面(子页面),在父页面中写调用控件的方法,子页面向父页面发送消息.告知父页面需要调用哪个硬件,父页面调用硬件完成后返回的数据会返回给父页面,父页面再将返回的数据发送给子页面.
父页面与子页面也面临着跨域问题,通过html5提供的postmessage解决此问题,postmessage不能发送方法,只能发送json,字符串等简单的内容;
例如:子页面发送"TakePicture"给父页面,父页面接收到后调用相机功能,随后上传图片至服务器,服务器返回一个json字符串,父页面再将获取到的json字符串发送给子页面,子页面获取到数据后进行处理.
…以上,是本人目前研究出的如何调用cordova硬件的方法
贴上代码
父页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/index2.js"></script>
</head>
<body>
<iframe id="iframe" src ="嵌入的页面" frameborder="0" style="position: absolute;top: 150px;left: 0;bottom: 0;width: 100%;height: 100%;border: 1px solid red"></iframe>
</body>
</html>
父页面用到的index2.js
(function($) {
$.fn.extend({
"find11.page" : function() {
var self = this;
function uploadFile(file,params) {
var IP=document.getElementById("ip").value;
var PORT=document.getElementById("port").value;
var uri = "http://"+IP+":"+PORT+"/SLPAPPWeb/UploadAction";
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = file.substring(file.lastIndexOf('/')+1);
options.mimeType = "text/plain";
if(params!=undefined){
params.filename=options.fileName;
options.params=params;
}
// var headers = {'headerParam':'headerValue'};
// options.headers = headers;
var ft = new FileTransfer();
ft.upload(file, uri, onSuccess, onError, options);
function onSuccess(r) {
window.frames[0].postMessage(r.response, '*');
}
function onError(error) {
window.frames[0].postMessage('上传失败', '*');
}
}
function TakePicture(params){
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
});
function onSuccess(imageURL) {
uploadFile(imageURL,params);
}
function onFail(message) {
alert('错误原因: ' + message);
}
}
self.init=function(){
window.addEventListener('message', function(ev) {
if(ev.data.type=='TakePicture'){
TakePicture(ev.data);
}else if(ev.data.type=='upload'){
uploadFile(ev.data.path);
}
}, false);
}
return self;
}
})
$(document).ready(function() {
var page=$(document)["find11.page"]();
page.init();
});
})(jQuery);
嵌入的页面
<%@ page language="java" pageEncoding="UTF-8" %>
<%@taglib tagdir="/WEB-INF/tags" prefix="LIG" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
</style>
</head>
<body>
<div style="width: 100%;">
<button id="picture">拍照</button>
<input type="text" id="text"/>
<img id="img" style="width: 100px;height: 100px" >
</div>
</body>
</html>
嵌入的页面中用到的js
(function ($) {
$.fn.extend({
"tourplan.page": function () {
var self = this;
var imgupload;
function bindEvent(){
self.find("#picture").bind("click",getpicture);
}
function getpictureAfter(json){
var j=$.parseJSON(json);
self.find("#text").val(j.id);
alert(_xtres_path+'/'+j.path)
self.find("#img").attr('src',_xtres_path+'/'+j.path);
}
function getpicture() {
var e={'src_bi_id':'RESC0002'};
$.LIGcall('TakePicture',e,getpictureAfter);
}
self.init = function () {
alert($.url("#id"))
bindEvent();
};
return self;
}
});
$(mycontent).ready(function () {
var page = $(mycontent)["tourplan.page"]();
page.init();
});
})(jQuery);
(function($) {
/**
* call硬件
*/
$.extend({
LIGcall:function(type,param,returnfun)
{
//通过jquery绑定message方法,需要注意返回的参数通过ev.originalEvent.data接收,不能通过ev.data接收
$(window).off('message').on('message',function(ev){
if(returnfun!=undefined){
returnfun(ev.originalEvent.data);
}
});
if(param==undefined){
param={};
}
param.type=type;
if(type=='TakePicture'){
param.person_info_Id=_xt_person_info_id;
}
parent.postMessage(param,'*');
}
})
})(jQuery);