Blog

You are currently viewing Ionic 3 InApp Browser / Web view example

Ionic 3 InApp Browser / Web view example

what is InAppBrowser ?

  1. InAppBrowser is a Cordova plugin that allows you to open an in app browser in your Cordova app or Ionic app .This in app browser can be used to open external URLs just like any normal web browser from your app.
  2. InAppBrowser can be used to open the system browser ,an in app browser which uses its own web-view or even the same webview used by Cordova/Ionic .You can control this behavior by using parameters such as self ,system ,_blank .

Ionic framework setup:

  1. Follow the installation procedure from Ionic Frame Work –  https://ionicframework.com/docs/intro/installation/
  2. Add the platform that you required
    1. ionic cordova platform add android | ios | windows
  3. Now we need to add the InAppBrowser plugin to this project
    1. ionic cordova plugin add cordova-plugin-inappbrowser
    2. npm install –save @ionic-native/in-app-browser
  4. Next we need to provide it so open src/app/app.module.ts 
    1. import { InAppBrowser } from '@ionic-native/in-app-browser';
    2. providers: [
    StatusBar,
    SplashScreen,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
  5. Open src/pages/home/home.ts and add
import { Component } from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(private iab: InAppBrowser, private platform: Platform) {
   
   this.platform.ready().then(() => {
            const browser = this.iab.create('https://www.npmjs.com/package/cordova-plugin-sqlite-2','_blank',{location:'no', zoom:'no'}); 
   browser.show();
   
});
   
  }
}
Tags: ,