本文不介绍该插件的使用org.apache.cordova.inappbrowser,可以自行参考官方文档http://plugins.cordova.io/#/package/org.apache.cordova.inappbrowser。
本文介绍自己的特殊应用
需求:
1、开发环境：sencha touch
要求在web app中能够呈现复杂格式的工程报表,例如如下:
2、要求能够自由缩放先写报表(双击实现放大缩小)
3、填写完成的数据要进入sqlite
解决思路：
1、采用cordova插件"org.apache.cordova.inappbrowser",地址：http://plugins.cordova.io/#/package/org.apache.cordova.inappbrowser
2、在sencha的panel中打开一个新的浏览器,在新浏览器中加载报表文件(html格式的)
3、在panel中监听loadstop事件(插件提供的监听浏览器加载完成的事件)
4、填写报表，将报表数据返回给父窗口。
问题出在如何将浏览器上填写的报表数据返回给父窗口，采用过一下思路：
cookie:排除,因为,存量有限,我的信息量很大。
sessionStorage:排除,webapp不同于pc,不能共享
localStorage:排除,webapp不同于pc,出现问题,未能排除
最后采用如下思路解决：
填写完成后,必须刷新子窗口才能再次激活父窗口监听的loadstop事件,故子窗口填写完后,采用data:uri这种技术刷新当前浏览器,并将填写的值带入刷新的页面。
代码如下:
sencha panel部分：
app/view/Main.js:
report.htm页面关键代码：
注意事项:
1、report.htm属于自己的资源文件,对sencha而言需要单独添加到app.json配置文件中
/**
* Extra resources to be copied along when build
*/
"resources": [
"resources/images",
"resources/icons",
"resources/startup",
"report.htm",
"result.htm"
],
2、data:uri的中文乱码问题:
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入.
目前，Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
网上有很多关键data uri schema的基础知识,自行查阅。
______________________________________________________
中文乱码处理看下面()
在RFC中，完整的语法定义如下。
dataurl := “data:” [ mediatype ] [ ";base64" ] “,” data
mediatype := [ type "/" subtype ] *( “;” parameter )
data := *urlchar
parameter := attribute “=” value
urlchar指的就是一般url中允许的字符，有些字符需要转义，
parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。
例如下面的例子。
data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
这个例子会显示出”你好，中文！”。如果吧charset部分去掉，就会显示乱码。
代码下载地址:http://download.csdn.net/download/jiangtongcn/8501165
cordova插件之org.apache.cordova.inappbrowser
原文地址：http://blog.csdn.net/jiangtongcn/article/details/44259257
