CIS 136 Building Mobile Apps In-App Browser CIS 136 Building Mobile Apps

InApp BrowserPlug-in opens a browser window within the app container rather than the system’s browser installed in the device no external browser needed to open links in the application Process stays within the app avoids pop ups popping up every time Benefits:  It gives you the ability to access web content within the application itself You don’t need to open the documents, pdf’s or web pages in any external browser Very easy to use and works exactly like any other browser

behaves like a standard web browser can't access Cordova APIs recommended to load third-party (untrusted) content, instead of loading that into the main Cordova webview 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).

App and in-Browser

plug-in: org.apache.cordova.inappbrowser cordova.InAppBrowser.open(url, target, options); url: the url to the website to load Target: whether url is going to open in Cordova’s Web view. _self: url is going to get open in the same window. _blank: url is going to get open in the new window. _system: url is going to get open in the system’s browser. Options: location: It is used to turn on and off the in-app browser’s location bar.

Additional Useful Android options clearcache: set to yes to have the browser's cookie cache cleared before the new window is opened closebuttoncaption: set to a string to use as the close button's caption instead of a X. Note that you need to localize this value yourself. closebuttoncolor: set to a valid hex color string, for example: #00ff00, and it will change the close button color from default, regardless of being a text or default X. Only has effect if user has location set to yes. footer: set to yes to show a close button in the footer similar to the iOS Done button. The close button will appear the same as for the header hence use closebuttoncaption and closebuttoncolor to set its properties.

Additional Android options footercolor: set to a valid hex color string, for example #00ff00 or #CC00ff00 (#aarrggbb) , and it will change the footer color from default. Only has effect if user has footer set to 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. hidenavigationbuttons: set to yes to hide the navigation buttons on the location toolbar, only has effect if user has location set to yes. The default value is no. hideurlbar: set to yes to hide the url bar on the location toolbar, only has effect if user has location set to yes. The default value is no.

Additional Android options navigationbuttoncolor: set to a valid hex color string, for example: #00ff00, and it will change the color of both navigation buttons from default. Only has effect if user has location set to yes and not hidenavigationbuttons set to yes. toolbarcolor: set to a valid hex color string, for example: #00ff00, and it will change the color the toolbar from default. Only has effect if user has location set to yes. lefttoright: Set to yes to swap positions of the navigation buttons and the close button. Specifically, navigation buttons go to the left and close button to the right. zoom: set to yes to show Android browser's zoom controls, set to no to hide them. Default value is yes. https://github.com/apache/cordova-plugin-inappbrowser

Code example window.open = cordova.InAppBrowser.open; var ref = window.open(‘http://www.go.com’, '_blank', 'location=yes'); OR var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');