zhaidi/cordova-plugin-inappbrowser
zhaidi/cordova-plugin-inappbrowser
1
0
Fork 0
forked from public/cordova-plugin-inappbrowser
Code Pull Requests Activity

updated docs + tests

Browse Source
This commit is contained in:
Steven Gill 2013-06-13 15:59:10 -07:00
parent 8c0c36d5bf
commit c6b944af1b
5 changed files with 148 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
docs/inappbrowser.md
View File

@ -20,7 +20,7 @@ license: Licensed to the Apache Software Foundation (ASF) under one
InAppBrowser InAppBrowser
============ ============
> The InAppBrowser is a web-browser that is shown in your app when you use the `window.open` call. > The `InAppBrowser` is a web browser that displays in the app when calling `window.open`.
var ref = window.open('http://apache.org', '_blank', 'location=yes'); var ref = window.open('http://apache.org', '_blank', 'location=yes');
@ -51,32 +51,28 @@ Permissions
<plugin name="InAppBrowser" value="CDVInAppBrowser" /> <plugin name="InAppBrowser" value="CDVInAppBrowser" />
### Windows Phone 7 + 8 ### Windows Phone 7 + 8
#### config.xml #### config.xml
<plugin name="InAppBrowser" /> <plugin name="InAppBrowser" />
addEventListener addEventListener
================ ================
> Adds a listener for an event from the InAppBrowser. > Adds a listener for an event from the `InAppBrowser`.
ref.addEventListener(eventname, callback); ref.addEventListener(eventname, callback);
- __ref:__ reference to the InAppBrowser window (`InAppBrowser`) - __ref__: reference to the `InAppBrowser` window _(InAppBrowser)_
- __eventname:__ the event to listen for (`String`) - __eventname__: the event to listen for _(String)_
loadstart - event fired when the InAppBrowser starts to load a URL - __loadstart__: event fires when the `InAppBrowser` starts to load a URL.
loadstop - event fired when the InAppBrowser finished loading a URL - __loadstop__: event fires when the `InAppBrowser` finishes loading a URL.
loaderror - event fired when the InAppBrowser encounters an error loading a URL - __loaderror__: event fires when the `InAppBrowser` encounters an error when loading a URL.
exit - event fired when the InAppBrowser window is closed - __exit__: event fires when the `InAppBrowser` window is closed.
- __callback:__ the function that is called when the event is fired. - __callback__: the function that executes when the event fires. The function is passed an `InAppBrowserEvent` object as a parameter.
The function is passed an `InAppBrowserEvent` object.
Supported Platforms Supported Platforms
------------------- -------------------
@ -102,11 +98,11 @@ Full Example
<script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script> <script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
// Wait for Cordova to load // Wait for device API libraries to load
// //
document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready // device APIs are available
// //
function onDeviceReady() { function onDeviceReady() {
var ref = window.open('http://apache.org', '_blank', 'location=yes'); var ref = window.open('http://apache.org', '_blank', 'location=yes');
@ -125,19 +121,19 @@ Full Example
removeEventListener removeEventListener
=================== ===================
> Removes a listener for an event from the InAppBrowser. > Removes a listener for an event from the `InAppBrowser`.
ref.removeEventListener(eventname, callback); ref.removeEventListener(eventname, callback);
- __ref:__ reference to the InAppBrowser window (`InAppBrowser`) - __ref__: reference to the `InAppBrowser` window. _(InAppBrowser)_
- __eventname:__ the event to stop listening for (`String`) - __eventname__: the event to stop listening for. _(String)_
loadstart - event fired when the InAppBrowser starts to load a URL - __loadstart__: event fires when the `InAppBrowser` starts to load a URL.
loadstop - event fired when the InAppBrowser finished loading a URL - __loadstop__: event fires when the `InAppBrowser` finishes loading a URL.
loaderror - event fired when the InAppBrowser encounters an error loading a URL - __loaderror__: event fires when the `InAppBrowser` encounters an error loading a URL.
exit - event fired when the InAppBrowser window is closed - __exit__: event fires when the `InAppBrowser` window is closed.
- __callback:__ the function that was to be called when the event is fired. - __callback__: the function to execute when the event fires.
The function is passed an `InAppBrowserEvent` object. The function is passed an `InAppBrowserEvent` object.
Supported Platforms Supported Platforms
@ -166,7 +162,7 @@ Full Example
<script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script> <script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
// Wait for Cordova to load // Wait for device API libraries to load
// //
document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener("deviceready", onDeviceReady, false);
@ -193,7 +189,7 @@ Full Example
iabRef.removeEventListener('exit', iabClose); iabRef.removeEventListener('exit', iabClose);
} }
// Cordova is ready // device APIs are available
// //
function onDeviceReady() { function onDeviceReady() {
iabRef = window.open('http://apache.org', '_blank', 'location=yes'); iabRef = window.open('http://apache.org', '_blank', 'location=yes');
@ -212,11 +208,11 @@ Full Example
close close
===== =====
> Closes the InAppBrowser window. > Closes the `InAppBrowser` window.
ref.close(); ref.close();
- __ref:__ reference to the InAppBrowser window (`InAppBrowser`) - __ref__: reference to the `InAppBrowser` window _(InAppBrowser)_
Supported Platforms Supported Platforms
------------------- -------------------
@ -243,11 +239,11 @@ Full Example
<script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script> <script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
// Wait for Cordova to load // Wait for device API libraries to load
// //
document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready // device APIs are available
// //
function onDeviceReady() { function onDeviceReady() {
var ref = window.open('http://apache.org', '_blank', 'location=yes'); var ref = window.open('http://apache.org', '_blank', 'location=yes');
@ -266,21 +262,20 @@ Full Example
executeScript executeScript
============= =============
> Injects JavaScript code into the InAppBrowser window > Injects JavaScript code into the `InAppBrowser` window
ref.executeScript(details, callback); ref.executeScript(details, callback);
- __ref:__ reference to the InAppBrowser window (`InAppBrowser`) - __ref__: reference to the `InAppBrowser` window. _(InAppBrowser)_
- __injectDetails:__ details of the script ot run (`Object`) - __injectDetails__: details of the script to run, specifying either a `file` or `code` key. _(Object)_
- Supported keys: (exactly one of "file" or "code" should be present) - __file__: URL of the script to inject.
- __code__: Text of the script to inject.
"file" - URL of the script to inject - __callback__: the function that executes after the JavaScript code is injected.
"code" - Text of the script to inject - If the injected script is of type `code`, the callback executes
with a single parameter, which is the return value of the
- __callback:__ the function that is to be called in the Cordova application after the JavaScript code is injected. script, wrapped in an `Array`. For multi-line scripts, this is
- If the injected script is of type "code", then the callback will be called with a single argument, which is the return value of the last statement, or the last expression
the return value of the script, wrapped in an Array. (For multi-line scripts, this is the return value of the evaluated.
last statement, or the last expression evaluated.)
Supported Platforms Supported Platforms
------------------- -------------------
@ -304,10 +299,10 @@ Full Example
<head> <head>
<title>InAppBrowser.executeScript Example</title> <title>InAppBrowser.executeScript Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script> <script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
// Wait for Cordova to load // Wait for device API libraries to load
// //
document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener("deviceready", onDeviceReady, false);
@ -329,7 +324,7 @@ Full Example
iabRef.removeEventListener('exit', iabClose); iabRef.removeEventListener('exit', iabClose);
} }
// Cordova is ready // device APIs are available
// //
function onDeviceReady() { function onDeviceReady() {
iabRef = window.open('http://apache.org', '_blank', 'location=yes'); iabRef = window.open('http://apache.org', '_blank', 'location=yes');
@ -346,18 +341,15 @@ Full Example
insertCSS insertCSS
========= =========
> Injects CSS into the InAppBrowser window > Injects CSS into the `InAppBrowser` window.
ref.insertCSS(details, callback); ref.insertCSS(details, callback);
- __ref:__ reference to the InAppBrowser window (`InAppBrowser`) - __ref__: reference to the `InAppBrowser` window _(InAppBrowser)_
- __injectDetails:__ details of the script ot run (`Object`) - __injectDetails__: details of the script to run, specifying either a `file` or `code` key. _(Object)_
- Supported keys: (exactly one of "file" or "code" should be present) - __file__: URL of the stylesheet to inject.
- __code__: Text of the stylesheet to inject.
"file" - URL of the stylesheet to inject - __callback__: the function that executes after the CSS is injected.
"code" - Text of the stylesheet to inject
- __callback:__ the function that is to be called in the Cordova application after the CSS is injected.
Supported Platforms Supported Platforms
------------------- -------------------
@ -381,10 +373,10 @@ Full Example
<head> <head>
<title>InAppBrowser.executeScript Example</title> <title>InAppBrowser.executeScript Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script> <script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
// Wait for Cordova to load // Wait for device API libraries to load
// //
document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener("deviceready", onDeviceReady, false);
@ -406,7 +398,7 @@ Full Example
iabRef.removeEventListener('exit', iabClose); iabRef.removeEventListener('exit', iabClose);
} }
// Cordova is ready // device APIs are available
// //
function onDeviceReady() { function onDeviceReady() {
iabRef = window.open('http://apache.org', '_blank', 'location=yes'); iabRef = window.open('http://apache.org', '_blank', 'location=yes');
@ -423,12 +415,13 @@ Full Example
InAppBrowserEvent InAppBrowserEvent
================= =================
The object that is passed to the callback function from an addEventListener call on an InAppBrowser object. The object that is passed to the callback function from an
`addEventListener` call on an `InAppBrowser` object.
Properties Properties
---------- ----------
- __type:__ the eventname (`String`) - one of loadstart, loadstop, loaderror or exit - __type__: the eventname, either `loadstart`, `loadstop`, `loaderror`, or `exit`. _(String)_
- __url:__ the URL that was loaded (`String`) - __url__: the URL that was loaded. _(String)_
- __code:__ the error code (`Number`) - only in the case of loaderror - __code__: the error code, only in the case of `loaderror`. _(Number)_
- __message:__ the error message (`String`) - only in the case of loaderror - __message__: the error message, only in the case of `loaderror`. _(String)_

45
docs/window.open.md
View File

@ -20,34 +20,40 @@ license: Licensed to the Apache Software Foundation (ASF) under one
window.open window.open
=========== ===========
Opens a URL in a new InAppBrowser instance, the current browser instance, or the system browser. Opens a URL in a new `InAppBrowser` instance, the current browser
instance, or the system browser.
var ref = window.open(url, target, options); var ref = window.open(url, target, options);
- __ref:__ reference to the InAppBrowser window (`InAppBrowser`) - __ref__: Reference to the `InAppBrowser` window. _(InAppBrowser)_
- __url:__ the URL to load (`String`). Call encodeURI() on this if you have Unicode characters in your URL. - __url__: The URL to load _(String)_. Call `encodeURI()` on this if the URL contains Unicode characters.
- __target:__ the target to load the URL in (`String`) (Optional, Default: "_self") - __target__: The target in which to load the URL, an optional parameter that defaults to `_self`. _(String)_
_self - opens in the Cordova WebView if url is in the white-list, else it opens in the InAppBrowser - `_self`: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the `InAppBrowser`.
_blank - always open in the InAppBrowser - `_blank`: Opens in the `InAppBrowser`.
_system - always open in the system web browser - `_system`: Opens in the system's web browser.
- __options__: Options for the `InAppBrowser`. Optional, defaulting to: `location=yes`. _(String)_
- __options:__ options for the InAppBrowser (`String`) (Optional, Default: "location=yes") The `options` string must not contain any blank space, and each feature's name/value pairs must be separated by a comma. Feature names are case insensitive. All platforms support the value below:
The options string must not contain any blank space, each feature name and value must be separated by a comma. Feature names are case insensitive. Only the value below is supported on all platforms: - __location__: Set to `yes` or `no` to turn the `InAppBrowser`'s location bar on or off.
- __location__ - set to 'yes' or 'no' to turn the location bar on or off for the InAppBrowser Android only
------------
- __closebuttoncaption__ - set to a string that will be the caption for the "Done" button.
iOS only iOS only
-------- --------
- __enableViewportScale__ - set to 'yes' or 'no' to prevent viewport scaling through a meta tag (defaults to 'no') - __closebuttoncaption__ - set to a string that will be the caption for the "Done" button. Note that you will have to localize this value yourself.
- __mediaPlaybackRequiresUserAction__ - set to 'yes' or 'no' to not allow autoplayed HTML5 video (defaults to 'no') - __toolbar__ - set to 'yes' or 'no' to turn the toolbar on or off for the InAppBrowser (defaults to 'yes')
- __allowInlineMediaPlayback__ - set to 'yes' or 'no' to allow inline HTML5 media playback, also, the video element in the HTML document must also include the webkit-playsinline attribute (defaults to 'no') - __enableViewportScale__: Set to `yes` or `no` to prevent viewport scaling through a meta tag (defaults to `no`).
- __keyboardDisplayRequiresUserAction__ - set to 'yes' or 'no' to open the keyboard when form elements get focus via the JavaScript focus() call (defaults to 'yes') - __mediaPlaybackRequiresUserAction__: Set to `yes` or `no` to prevent HTML5 audio or video from autoplaying (defaults to `no`).
- __suppressesIncrementalRendering__ - set to 'yes' or 'no' to wait until all new view content has been received before it is rendered (defaults to 'no') - __allowInlineMediaPlayback__: Set to `yes` or `no` to allow inline HTML5 media playback, displaying within the browser window rather than a device-specific playback interface. The HTML's `video` element must also include the `webkit-playsinline` attribute (defaults to `no`)
- __presentationstyle__ - set to 'pagesheet', 'formsheet' or 'fullscreen' to set the [presentation style](http://developer.apple.com/library/ios/documentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html#//apple_ref/occ/instp/UIViewController/modalPresentationStyle) (defaults to 'fullscreen') - __keyboardDisplayRequiresUserAction__: Set to `yes` or `no` to open the keyboard when form elements receive focus via JavaScript's `focus()` call (defaults to `yes`).
- __transitionstyle__ - set to 'fliphorizontal', 'crossdissolve' or 'coververtical' to set the [transition style](http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html#//apple_ref/occ/instp/UIViewController/modalTransitionStyle) (defaults to 'coververtical') - __suppressesIncrementalRendering__: Set to `yes` or `no` to wait until all new view content is received before being rendered (defaults to `no`).
- __presentationstyle__: Set to `pagesheet`, `formsheet` or `fullscreen` to set the [presentation style](http://developer.apple.com/library/ios/documentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html#//apple_ref/occ/instp/UIViewController/modalPresentationStyle) (defaults to `fullscreen`).
- __transitionstyle__: Set to `fliphorizontal`, `crossdissolve` or `coververtical` to set the [transition style](http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html#//apple_ref/occ/instp/UIViewController/modalTransitionStyle) (defaults to `coververtical`).
Supported Platforms Supported Platforms
------------------- -------------------
@ -74,11 +80,11 @@ Full Example
<script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script> <script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
// Wait for Cordova to load // Wait for device API libraries to load
// //
document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready // device APIs are available
// //
function onDeviceReady() { function onDeviceReady() {
// external url // external url
@ -92,4 +98,3 @@ Full Example
<body> <body>
</body> </body>
</html> </html>

28
test/inappbrowser/index.html
View File

@ -173,6 +173,29 @@
}); });
} }
} }
var hiddenwnd=null;
var loadlistener = function(event) { alert('background window loaded ' ); };
function openHidden(url, startHidden) {
var shopt =(startHidden) ? 'hidden=yes' : '';
hiddenwnd = window.open(url,'random_string',shopt);
if (!hiddenwnd) {
alert('window.open returned ' + hiddenwnd);
return;
}
if(startHidden) hiddenwnd.addEventListener('loadstop', loadlistener);
}
function showHidden() {
if(!!hiddenwnd ) {
hiddenwnd.show();
}
}
function closeHidden() {
if(!!hiddenwnd ) {
hiddenwnd.removeEventListener('loadstop',loadlistener);
hiddenwnd.close();
hiddenwnd=null;
}
}
</script> </script>
</head> </head>
<body onload="init();" id="stage" class="theme"> <body onload="init();" id="stage" class="theme">
@ -225,6 +248,11 @@
<div class="btn large" onclick="openWithScript('inject.html', 'inject.js', true);">Script File Injection (CB)</div> <div class="btn large" onclick="openWithScript('inject.html', 'inject.js', true);">Script File Injection (CB)</div>
<div class="btn large" onclick="openWithScript('inject.html');">Script Literal Injection</div> <div class="btn large" onclick="openWithScript('inject.html');">Script Literal Injection</div>
<div class="btn large" onclick="openWithScript('inject.html', null, true);">Script Literal Injection (CB)</div> <div class="btn large" onclick="openWithScript('inject.html', null, true);">Script Literal Injection (CB)</div>
<h1>Open Hidden </h1>
<div class="btn large" onclick="openHidden('http://google.com',true);">google.com hidden</div>
<div class="btn large" onclick="showHidden();">show hidden</div>
<div class="btn large" onclick="closeHidden();">close hidden</div>
<div class="btn large" onclick="openHidden('http://google.com',false);">google.com not hidden</div>
<h2> </h2><div class="backBtn" onclick="backHome();">Back</div> <h2> </h2><div class="backBtn" onclick="backHome();">Back</div>
</body> </body>
</html> </html>

18
test/inappbrowser/inject.css
View File

@ -1,3 +1,21 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
#style-update-file { #style-update-file {
display: block !important; display: block !important;
} }

18
test/inappbrowser/inject.js
View File

@ -1,2 +1,20 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var d = document.getElementById("header") var d = document.getElementById("header")
d.innerHTML = "Script file successfully injected"; d.innerHTML = "Script file successfully injected";