Org.apache.cordova.inappbrowser of Cordova Plug-in

This article does not describe the use of the plug-in Org.apache.cordova.inappbrowser, you can refer to the official document Http://plugins.cordova.io/#/package/org.apache.cordova.inappbrowser.

This article describes your own special application

Demand:

1. Development environment: Sencha Touch

Requires the ability to render engineering reports in a complex format in a web app, such as the following:

2, requires the ability to freely scale the first write report (double-click to zoom Out)

3, fill in the completed data to enter SQLite

Solution Ideas:

1, the use of Cordova plug-in "Org.apache.cordova.inappbrowser", Address: Http://plugins.cordova.io/#/package/org.apache.cordova.inappbrowser

2. Open a new browser in the Sencha panel and load the report file in the new browser (in HTML format)

3. Monitor the Loadstop event in the panel (plug-in provides the listener to load the completed event)

4. Fill in the report and return the report data to the parent window.

The problem is how to return the report data that is filled out on the browser to the parent window, using a little bit of thought:

Cookies: Exclude, because, the stock is limited, I have a large amount of information.

Sessionstorage: Exclude, WebApp is different from PC, cannot share

Localstorage: Exclude, WebApp is different from PC, problem occurred, failed to exclude

Finally use the following ideas to solve:

After completion, you must refresh the child window to activate the parent window to listen to the Loadstop event, so after filling out the child window, using Data:uri This technology to refresh the current browser, and fill in the values into the refreshed page.

The code is as follows:

Sencha Panel section:

App/view/main.js:

Report.htm page Key code:

Precautions:

1, report.htm belong to their own resource files, Sencha need to be added separately to the App.json configuration file

/**
* Extra resources to being copied along when build
*/
"Resources": [
"Resources/images",
"Resources/icons",
"Resources/startup",
"Report.htm",
"Result.htm"
],

2, Data:uri of Chinese garbled problem:

The data URI scheme is defined in RFC2397 to embed some small data directly into a Web page, eliminating the need to load it from an external file.

Currently, the types supported by the Data URI scheme are:

Data:, Text

Data:text/plain, Text data

data:text/html,html Code

DATA:TEXT/HTML;BASE64,BASE64 encoded HTML code

DATA:TEXT/CSS,CSS Code

Data:text/css;base64,base64 coded CSS Code

Data:text/javascript,javascript Code

DATA:TEXT/JAVASCRIPT;BASE64,BASE64 encoded JavaScript code

DATA:IMAGE/GIF;BASE64,BASE64 encoded GIF image data

DATA:IMAGE/PNG;BASE64,BASE64 encoded PNG image data

DATA:IMAGE/JPEG;BASE64,BASE64 encoded JPEG image data

DATA:IMAGE/X-ICON;BASE64,BASE64 encoded icon image data

There are many key data URI schemas on the web that are the basis for self-reference.

______________________________________________________

Chinese garbled processing see below ()

In the RFC, the complete syntax is defined as follows.
Dataurl: = "DATA:" [mediatype] ["; base64"] "," data
MediaType: = [type '/' subtype] * (";" parameter)
Data: = *urlchar
Parameter: = attribute "=" value
Urlchar refers to the characters allowed in the generic URL, and some characters need to be escaped.
Parameter can extend the properties of the mediatype, commonly charset, which is used to define the encoding format that needs to be used in multi-language situations.
For example, the following example.
Data:text/plain;charset=utf-8;base64,5l2g5aw977ym5lit5pah77yb
This example will show "Hello, Chinese!" ”。 If the charset part is removed, it will show garbled characters.

Code: http://download.csdn.net/download/jiangtongcn/8501165

Org.apache.cordova.inappbrowser of Cordova Plug-in