diff options
Diffstat (limited to 'plugins/cordova-plugin-inappbrowser/README.md')
| -rw-r--r-- | plugins/cordova-plugin-inappbrowser/README.md | 388 |
1 files changed, 388 insertions, 0 deletions
diff --git a/plugins/cordova-plugin-inappbrowser/README.md b/plugins/cordova-plugin-inappbrowser/README.md new file mode 100644 index 00000000..31a3c72f --- /dev/null +++ b/plugins/cordova-plugin-inappbrowser/README.md @@ -0,0 +1,388 @@ +<!--- + license: 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. +--> + +# cordova-plugin-inappbrowser + +[](https://travis-ci.org/apache/cordova-plugin-inappbrowser) + +This plugin provides a web browser view that displays when calling `cordova.InAppBrowser.open()`. + + var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes'); + +The `cordova.InAppBrowser.open()` function is defined to be a drop-in replacement +for the `window.open()` function. Existing `window.open()` calls can use the +InAppBrowser window, by replacing window.open: + + window.open = cordova.InAppBrowser.open; + +The InAppBrowser window behaves like a standard web browser, +and can't access Cordova APIs. For this reason, the InAppBrowser is recommended +if you need to load third-party (untrusted) content, instead of loading that +into the main Cordova webview. The InAppBrowser is not subject to the +whitelist, nor is opening links in the system browser. + +The InAppBrowser provides by default its own GUI controls for the user (back, +forward, done). + +For backwards compatibility, this plugin also hooks `window.open`. +However, the plugin-installed hook of `window.open` can have unintended side +effects (especially if this plugin is included only as a dependency of another +plugin). The hook of `window.open` will be removed in a future major release. +Until the hook is removed from the plugin, apps can manually restore the default +behaviour: + + delete window.open // Reverts the call back to it's prototype's default + +Although `window.open` is in the global scope, InAppBrowser is not available until after the `deviceready` event. + + document.addEventListener("deviceready", onDeviceReady, false); + function onDeviceReady() { + console.log("window.open works well"); + } + +## Installation + + cordova plugin add cordova-plugin-inappbrowser + +If you want all page loads in your app to go through the InAppBrowser, you can +simply hook `window.open` during initialization. For example: + + document.addEventListener("deviceready", onDeviceReady, false); + function onDeviceReady() { + window.open = cordova.InAppBrowser.open; + } + +## cordova.InAppBrowser.open + +Opens a URL in a new `InAppBrowser` instance, the current browser +instance, or the system browser. + + var ref = cordova.InAppBrowser.open(url, target, options); + +- __ref__: Reference to the `InAppBrowser` window. _(InAppBrowser)_ + +- __url__: The URL to load _(String)_. Call `encodeURI()` on this if the URL contains Unicode characters. + +- __target__: The target in which to load the URL, an optional parameter that defaults to `_self`. _(String)_ + + - `_self`: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the `InAppBrowser`. + - `_blank`: Opens in the `InAppBrowser`. + - `_system`: Opens in the system's web browser. + +- __options__: Options for the `InAppBrowser`. Optional, defaulting to: `location=yes`. _(String)_ + + 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: + + - __location__: Set to `yes` or `no` to turn the `InAppBrowser`'s location bar on or off. + + Android only: + + - __hidden__: set to `yes` to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to `no` (default) to have the browser open and load normally. + - __clearcache__: set to `yes` to have the browser's cookie cache cleared before the new window is opened + - __clearsessioncache__: set to `yes` to have the session cookie cache cleared before the new window is opened + - __zoom__: set to `yes` to show Android browser's zoom controls, set to `no` to hide them. Default value is `yes`. + - __hardwareback__: set to `yes` to use the hardware back button to navigate backwards through the `InAppBrowser`'s history. If there is no previous page, the `InAppBrowser` will close. The default value is `yes`, so you must set it to `no` if you want the back button to simply close the InAppBrowser. + + iOS only: + + - __closebuttoncaption__: set to a string to use as the __Done__ button's caption. Note that you need to localize this value yourself. + - __disallowoverscroll__: Set to `yes` or `no` (default is `no`). Turns on/off the UIWebViewBounce property. + - __hidden__: set to `yes` to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to `no` (default) to have the browser open and load normally. + - __clearcache__: set to `yes` to have the browser's cookie cache cleared before the new window is opened + - __clearsessioncache__: set to `yes` to have the session cookie cache cleared before the new window is opened + - __toolbar__: set to `yes` or `no` to turn the toolbar on or off for the InAppBrowser (defaults to `yes`) + - __enableViewportScale__: Set to `yes` or `no` to prevent viewport scaling through a meta tag (defaults to `no`). + - __mediaPlaybackRequiresUserAction__: Set to `yes` or `no` to prevent HTML5 audio or video from autoplaying (defaults to `no`). + - __allowInlineMediaPlayback__: Set to `yes` or `no` to allow in-line 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`) + - __keyboardDisplayRequiresUserAction__: Set to `yes` or `no` to open the keyboard when form elements receive focus via JavaScript's `focus()` call (defaults to `yes`). + - __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`). + - __toolbarposition__: Set to `top` or `bottom` (default is `bottom`). Causes the toolbar to be at the top or bottom of the window. + + Windows only: + + - __hidden__: set to `yes` to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to `no` (default) to have the browser open and load normally. + - __fullscreen__: set to `yes` to create the browser control without a border around it. Please note that if __location=no__ is also specified, there will be no control presented to user to close IAB window. + +### Supported Platforms + +- Amazon Fire OS +- Android +- BlackBerry 10 +- Firefox OS +- iOS +- Windows 8 and 8.1 +- Windows Phone 7 and 8 +- Browser + +### Example + + var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes'); + var ref2 = cordova.InAppBrowser.open(encodeURI('http://ja.m.wikipedia.org/wiki/ハングル'), '_blank', 'location=yes'); + +### Firefox OS Quirks + +As plugin doesn't enforce any design there is a need to add some CSS rules if +opened with `target='_blank'`. The rules might look like these + +``` css +.inAppBrowserWrap { + background-color: rgba(0,0,0,0.75); + color: rgba(235,235,235,1.0); +} +.inAppBrowserWrap menu { + overflow: auto; + list-style-type: none; + padding-left: 0; +} +.inAppBrowserWrap menu li { + font-size: 25px; + height: 25px; + float: left; + margin: 0 10px; + padding: 3px 10px; + text-decoration: none; + color: #ccc; + display: block; + background: rgba(30,30,30,0.50); +} +.inAppBrowserWrap menu li.disabled { + color: #777; +} +``` + +### Windows Quirks + +Similar to Firefox OS IAB window visual behaviour can be overridden via `inAppBrowserWrap`/`inAppBrowserWrapFullscreen` CSS classes + +### Browser Quirks + +- Plugin is implemented via iframe, + +- Navigation history (`back` and `forward` buttons in LocationBar) is not implemented. + +## InAppBrowser + +The object returned from a call to `cordova.InAppBrowser.open`. + +### Methods + +- addEventListener +- removeEventListener +- close +- show +- executeScript +- insertCSS + +## addEventListener + +> Adds a listener for an event from the `InAppBrowser`. + + ref.addEventListener(eventname, callback); + +- __ref__: reference to the `InAppBrowser` window _(InAppBrowser)_ + +- __eventname__: the event to listen for _(String)_ + + - __loadstart__: event fires when the `InAppBrowser` starts to load a URL. + - __loadstop__: event fires when the `InAppBrowser` finishes loading a URL. + - __loaderror__: event fires when the `InAppBrowser` encounters an error when loading a URL. + - __exit__: event fires when the `InAppBrowser` window is closed. + +- __callback__: the function that executes when the event fires. The function is passed an `InAppBrowserEvent` object as a parameter. + +### InAppBrowserEvent Properties + +- __type__: the eventname, either `loadstart`, `loadstop`, `loaderror`, or `exit`. _(String)_ + +- __url__: the URL that was loaded. _(String)_ + +- __code__: the error code, only in the case of `loaderror`. _(Number)_ + +- __message__: the error message, only in the case of `loaderror`. _(String)_ + + +### Supported Platforms + +- Amazon Fire OS +- Android +- iOS +- Windows 8 and 8.1 +- Windows Phone 7 and 8 +- Browser + +### Browser Quirks + +`loadstart` and `loaderror` events are not being fired. + +### Quick Example + + var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes'); + ref.addEventListener('loadstart', function(event) { alert(event.url); }); + +## removeEventListener + +> Removes a listener for an event from the `InAppBrowser`. + + ref.removeEventListener(eventname, callback); + +- __ref__: reference to the `InAppBrowser` window. _(InAppBrowser)_ + +- __eventname__: the event to stop listening for. _(String)_ + + - __loadstart__: event fires when the `InAppBrowser` starts to load a URL. + - __loadstop__: event fires when the `InAppBrowser` finishes loading a URL. + - __loaderror__: event fires when the `InAppBrowser` encounters an error loading a URL. + - __exit__: event fires when the `InAppBrowser` window is closed. + +- __callback__: the function to execute when the event fires. +The function is passed an `InAppBrowserEvent` object. + +### Supported Platforms + +- Amazon Fire OS +- Android +- iOS +- Windows 8 and 8.1 +- Windows Phone 7 and 8 +- Browser + +### Quick Example + + var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes'); + var myCallback = function(event) { alert(event.url); } + ref.addEventListener('loadstart', myCallback); + ref.removeEventListener('loadstart', myCallback); + +## close + +> Closes the `InAppBrowser` window. + + ref.close(); + +- __ref__: reference to the `InAppBrowser` window _(InAppBrowser)_ + +### Supported Platforms + +- Amazon Fire OS +- Android +- Firefox OS +- iOS +- Windows 8 and 8.1 +- Windows Phone 7 and 8 +- Browser + +### Quick Example + + var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes'); + ref.close(); + +## show + +> Displays an InAppBrowser window that was opened hidden. Calling this has no effect if the InAppBrowser was already visible. + + ref.show(); + +- __ref__: reference to the InAppBrowser window (`InAppBrowser`) + +### Supported Platforms + +- Amazon Fire OS +- Android +- iOS +- Windows 8 and 8.1 +- Browser + +### Quick Example + + var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'hidden=yes'); + // some time later... + ref.show(); + +## executeScript + +> Injects JavaScript code into the `InAppBrowser` window + + ref.executeScript(details, callback); + +- __ref__: reference to the `InAppBrowser` window. _(InAppBrowser)_ + +- __injectDetails__: details of the script to run, specifying either a `file` or `code` key. _(Object)_ + - __file__: URL of the script to inject. + - __code__: Text of the script to inject. + +- __callback__: the function that executes after the JavaScript code is injected. + - If the injected script is of type `code`, the callback executes + with a single parameter, which is the return value of the + script, wrapped in an `Array`. For multi-line scripts, this is + the return value of the last statement, or the last expression + evaluated. + +### Supported Platforms + +- Amazon Fire OS +- Android +- iOS +- Windows 8 and 8.1 +- Browser + +### Quick Example + + var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes'); + ref.addEventListener('loadstop', function() { + ref.executeScript({file: "myscript.js"}); + }); + +### Browser Quirks + +- only __code__ key is supported. + +### Windows Quirks + +Due to [MSDN docs](https://msdn.microsoft.com/en-us/library/windows.ui.xaml.controls.webview.invokescriptasync.aspx) the invoked script can return only string values, otherwise the parameter, passed to __callback__ will be `[null]`. + +## insertCSS + +> Injects CSS into the `InAppBrowser` window. + + ref.insertCSS(details, callback); + +- __ref__: reference to the `InAppBrowser` window _(InAppBrowser)_ + +- __injectDetails__: details of the script to run, specifying either a `file` or `code` key. _(Object)_ + - __file__: URL of the stylesheet to inject. + - __code__: Text of the stylesheet to inject. + +- __callback__: the function that executes after the CSS is injected. + +### Supported Platforms + +- Amazon Fire OS +- Android +- iOS +- Windows + +### Quick Example + + var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes'); + ref.addEventListener('loadstop', function() { + ref.insertCSS({file: "mystyles.css"}); + }); + |