Introduction
InAppBrowser plugin is used for opening a web browser inside Ionic and Cordova applications. With the help of this plugin, we can use web-based pages inside our application. To use this plugin, the following software must be installed on your machine:
- Node js
- Cordova
- Ionic
Create an ionic project using the following command:
npm install -g cordova
npm install -g ionic
ionic start myApp blank
Where myApp is your application name and ‘blank’ is the type of application you want to create. If you want an application with tabs on the bottom you can use ‘tabs’ instead of ‘blank’.
With the above command, your ionic application will be created. Now we are going to use InappBrowser. Instructions to use the plugin are given below:
Installation:
ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser
Platforms:
- AmazonFire OS
- Android
- Browser
- iOS
- macOS
- Windows
Usage:
Go to project > src > app > home where home is the default page created by Ionic.
Open home.page.html file and add the following code:
<ion-header>
<ion-toolbar>
<img class="logo" src="assets/images/logo.png">
</ion-toolbar>
</ion-header>
<ion-content padding text-center>
<ion-button class="primary" shape="round" (click)="goTo()">
<ion-icon ios="ios-log-in" md="md-log-in">Google
</ion-button>
</ion-content>
Add following code in home.page.ts
import { Component } from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
options : {
location : 'no',//Or 'no'
hidden : 'no', //Or 'yes'
clearcache : 'yes',
clearsessioncache : 'yes',
zoom : 'yes',//Android only ,shows browser zoom controls
hardwareback : 'yes',
mediaPlaybackRequiresUserAction : 'no',
shouldPauseOnSuspend : 'no', //Android only
closebuttoncaption : 'Close', //iOS only
toolbar : 'yes', //iOS only
fullscreen : 'yes',//Windows only
hidenavigationbuttons:'yes',
toolbarposition:'bottom',
toolbarcolor: '#000000',
navigationbuttoncolor: '#ffffff',
hideurlbar: 'yes',
};
constructor(private iab: InAppBrowser) {}
goTo(){
let target = "_blank";
const browser =
this.iab.create('https://www.google.com/',target,this.options);
browser.show();
}
}
To run the code, use the following command:
ionic serve
Result:
Above input will open the app in the browser and by clicking the Google button it will open the URL in the application.
Those who want to pursue their careers in the IT industry, our extensive and elaborated Computer Certification exam is available for both beginners and experts. This exam will help with a deep analysis of your skills in different functionalities of computer systems.
