cordova插件之org.apache.cordova.inappbrowser

本文不介绍该插件的使用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