This plugin provides a web browser view that displays when calling window.open()
.
var ref = window.open('http://apache.org', '_blank', 'location=yes');
NOTE: The InAppBrowser window behaves like a standard web browser, and can't access Cordova APIs.
cordova plugin add org.apache.cordova.inappbrowser
Opens a URL in a new InAppBrowser
instance, the current browser instance, or the system browser.
var ref = window.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:
yes
or no
to turn the InAppBrowser
's location bar on or off.Android only:
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.yes
to have the browser's cookie cache cleared before the new window is openedyes
to have the session cookie cache cleared before the new window is openediOS only:
yes
or no
(default is no
). Turns on/off the UIWebViewBounce property.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.yes
to have the browser's cookie cache cleared before the new window is openedyes
to have the session cookie cache cleared before the new window is openedyes
or no
to turn the toolbar on or off for the InAppBrowser (defaults to yes
)yes
or no
to prevent viewport scaling through a meta tag (defaults to no
).yes
or no
to prevent HTML5 audio or video from autoplaying (defaults to no
).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
)yes
or no
to open the keyboard when form elements receive focus via JavaScript's focus()
call (defaults to yes
).yes
or no
to wait until all new view content is received before being rendered (defaults to no
).pagesheet
, formsheet
or fullscreen
to set the presentation style (defaults to fullscreen
).fliphorizontal
, crossdissolve
or coververtical
to set the transition style (defaults to coververtical
).top
or bottom
(default is bottom
). Causes the toolbar to be at the top or bottom of the window.Windows only:
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.var ref = window.open('http://apache.org', '_blank', 'location=yes'); var ref2 = window.open(encodeURI('http://ja.m.wikipedia.org/wiki/ハングル'), '_blank', 'location=yes');
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
.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; }
The object returned from a call to window.open
.
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)
InAppBrowser
starts to load a URL.InAppBrowser
finishes loading a URL.InAppBrowser
encounters an error when loading a URL.InAppBrowser
window is closed.callback: the function that executes when the event fires. The function is passed an InAppBrowserEvent
object as a parameter.
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)
var ref = window.open('http://apache.org', '_blank', 'location=yes'); ref.addEventListener('loadstart', function(event) { alert(event.url); });
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)
InAppBrowser
starts to load a URL.InAppBrowser
finishes loading a URL.InAppBrowser
encounters an error loading a URL.InAppBrowser
window is closed.callback: the function to execute when the event fires. The function is passed an InAppBrowserEvent
object.
var ref = window.open('http://apache.org', '_blank', 'location=yes'); var myCallback = function(event) { alert(event.url); } ref.addEventListener('loadstart', myCallback); ref.removeEventListener('loadstart', myCallback);
Closes the
InAppBrowser
window.
ref.close();
InAppBrowser
window (InAppBrowser)var ref = window.open('http://apache.org', '_blank', 'location=yes'); ref.close();
Displays an InAppBrowser window that was opened hidden. Calling this has no effect if the InAppBrowser was already visible.
ref.show();
InAppBrowser
)var ref = window.open('http://apache.org', '_blank', 'hidden=yes'); // some time later... ref.show();
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)
callback: the function that executes after the JavaScript code is injected.
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.var ref = window.open('http://apache.org', '_blank', 'location=yes'); ref.addEventListener('loadstop', function() { ref.executeScript({file: "myscript.js"}); });
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)
callback: the function that executes after the CSS is injected.
var ref = window.open('http://apache.org', '_blank', 'location=yes'); ref.addEventListener('loadstop', function() { ref.insertCSS({file: "mystyles.css"}); });