In the previous tutorial i had written a post about how to use cordova device plugin, this post was about cordova inappbrowser plugin example using ionic framework and ngcordova.
the cordova inappbrowser plugin is used to launch the URL into external browser or external applications, this example will work on iOS and Android devices.
Next create the ionic cordova project using the below command lines.
ionic start InAppBrowser blank cd InAppBrowser
Then add the android and iOS platforms using the below ionic commands.
ionic platform add android ionic platform add ios
Note:
Remember you must have mac to build ios applications.
Adding Cordova InAppBrowser Plugin
Next we have add the apache cordova inappbrowser plugin using the below command line.
ionic plugin add cordova-plugin-inappbrowser
Now we have configured the application to use cordova inappbrowser plugin.
Then add the buttons for open the link into various types browser client in the ion-content tag. once added the button tags add the event using ng-click attribute and add ng-controller attribute in the ion-content as mentioned in the below.
<body ng-app="starter">
<ion-header-bar class="bar-stable">
<h1 class="title">InAppBrowser</h1>
</ion-header-bar>
<ion-content ng-controller="ExampleController" padding="true">
<button class="button button-full button-assertive" ng-click="openInExternalBrowser()">
Open In External Browser
</button>
<button class="button button-full button-assertive" ng-click="openInAppBrowser()">
Open In App Browser
</button>
<button class="button button-full button-assertive" ng-click="openCordovaWebView()">
Open In Cordova Webview
</button>
</ion-content>
</body>
InAppBrowser Function
cordova inappbrowser plugin provides a web browser view that displays when calling cordova.InAppBrowser.open() or existing window.open().
_blank: It opens the URL in the in app browser
_self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
_system: Opens in the system’s web browser.
location=yes: It displays the full URL of the page in the InAppBrowser in a location bar, by the default location is set to no.
angular.module('starter', ['ionic'])
.controller("ExampleController", function ($scope) {
$scope.openInExternalBrowser = function()
{
// Open in external browser
window.open('http://google.com','_system','location=yes');
};
$scope.openInAppBrowser = function()
{
// Open in app browser
window.open('http://google.com','_blank');
};
$scope.openCordovaWebView = function()
{
// Open cordova webview if the url is in the whitelist otherwise opens in app browser
window.open('http://google.com','_self');
};
});
next we have to run the application using the below command lines. if you are running in emulator you can use emulate instead run.
ionic run ios ionic run android
Then run the application the output will looks like below, and find the full source code for this application in this github link.
Leave a Reply