Cordova Plug-in: Inappbrowser

Original URL: http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-plugin-inappbrowser/

You need to use the Cordova-plugin-inappbrowser plugin if the link inside the app is open in the specified internal browser or system browser;

This plugin is handy when we need to jump to a specific browser page in the app.

1. First install this plugin in our project: Cordova plugin add cordova-plugin-inappbrowser, but with Cordova installation, The package will not be displayed in the Package.json file, that is, when we reset the project again, the plugin will not automatically install again, so we need to use this command to install to avoid this situation: Ionic plugin add Cordova-plugin-inappbrowser. If you have already installed with Cordova, you need to use Cordova to uninstall the plug-in, and then use the ionic installation;

2. How to use:

Cordova. Inappbrowser.open (url,target,options)

The URL parameter in open () is the address of the browser jump;

There are three parameters for target:

_self: If the URL address is in whitelist, it is opened with the whitelist of Cordova;

_blank: Open the address directly in the app;

_system: The new page is opened with the phone's default browser

The options parameter contains the following information:

Location: Set to Yes or no to open or close the plugin's locationbar;

Hidden: Set to Yes to load out the page but not display, set to No to load the page normally;

Android Unique Properties:

Zoom: Set to Yes to display the Zoom browser page button, set to No will not display the Zoom button;

Hardwareback: Set to Yes to call the Android Back button back to the previous interface, set to No then the return key to exit the browser page;

iOS Exclusive properties:

Closebuttoncaption: Set Yes to show the Done button, set to No to hide the Done button, click the Done button to close the browser page;

Toolbar: Set to Yes to show Toolbar;no hide Toolbar (Toolabar equivalent to Android's return key function);

Keyboarddisplayrequiresuseraction: Set to Yes or no to control whether to call focus () via JavaScript when the keyboard is turned on to receive focus, by default yes;

Toolbarposition: Set to top or bottom to make the toolbar appear at the top or bottom of the window;

3. Simple example:

$scope. openurl=function () {if(!Cordova. Inappbrowser) {return;}//Toolbar=yes only available for iOS, provides three buttons for closing, returning, and advancing//Toolbarposition=top/bottom only valid for iOS, determines the location of toolbar//closebuttoncaption= off iOS only validCordova. Inappbrowser.open ('http://www.baidu.com','_blank','location=no,toolbar=yes,toolbarposition=top,closebuttoncaption= off');}

OpenURL is I write a method, in the HTML page in the corresponding location with Ng-click to call this method, this will trigger the browser jump event,

According to the setting in open (), the URL parameter is Baidu's website;

The target parameter is "_blank", which is the page that opens the URL in the app;

The options parameter for the iOS system will show the location of the Toolbar,toolbar at the top, closebuttoncaption hide the Done button.

Cordova Plug-in: Inappbrowser