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.
so once i run this should it open the link in the emulator? using visual studio and have the correct output with the three buttons but when i click nothing happens……..
Nothing happens on click…did you test run these steps.
It worked for me, check your declarations in the app for the controller. Depending on the app template you are using, controllers might be tied to your views in a different way.
Hello. I have a question. Do I need ngCordova? Without ngCordova, it works fine on iOS but not on android.
The problem of android is opening a pdf file. When I open a pdf file, it opens just empty webview. After while, I realised I did not installed ngCordova, and I installed but still not working on android.
This is a test js.
$scope.justOpen = function(){
window.open(‘http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf’, ‘_blank’, ‘location=yes’);
}
And html
|a ng-click=”justOpen();”| test |/a|
Hi,
No, you don’t need ng-cordova, please check the code once once again, still not works please let me know. i have tested in android it is working fine.
how to show website in ionic content ?
How to add loader here…
It works fine. Thanks for great tutorial. Now i want to change color of status bar so that it match with app statusbar color. Please need help, How can i do that?
Merci !! Ca m’a beaucoup aidé
how to return back to app from ios browser?
From an Inappbrowser how does one browser and upload files…
Thanks for your work! Everything works very helpful during development.
How Can I keep left menu bar and header area?
How do i customise web page not available message (load error) pleas help https://uploads.disquscdn.com/images/ea6a3f273754efae59fa41b7abdae3809ce84159b27dbe442a0c79793934f0c7.png
Hi
Get network request if it 404 error, then redirect that page with offline HTML page.
Thanks for your replay
But the redirect works only after coming back from the error page (from inappbrowser error page)
i want to customise inapp browser error page
https://uploads.disquscdn.com/images/ea6a3f273754efae59fa41b7abdae3809ce84159b27dbe442a0c79793934f0c7.png?w=800&h=1331
or help me to hide the url in error page
please help
Did you tried loadErrorCallBack event in app browser plugin? try to get network details from that event then proceed to show offline page or whatever you want.
$scope.login = function() {
$cordovaOauth.facebook(“”, [“email”, “public_profile”]).then(function(result) {
result.access_token;
}, function(error) {
});
};
This is my code where do i call loadErrorCallBack pleas explain
Thank you