Introduction of InAppBrowser :

Here we learn “How to use InAppBrowser Plugin in ionic4“, in which we check opening any browser in our app.

Output Example –

Benefits of using InAppBrowser:

• Generally if we want to open any site then we leave the app, so this is solution of that problem.
• Users can view web pages without leaving app.
• This plugin provide a web browser view within your app, so user don’t feel bad.
• Syntax –

Syntax: var ref = cordova.InAppBrowser.open(url, target, options);
Example: var ref = cordova.InAppBrowser.open(‘http://apache.org’, ‘_blank’, ‘location=yes’);

Explanation of code –

• ref: Reference to the InAppBrowser window when the target is set to ‘_blank’. (InAppBrowser)
• url: The URL to load (String). Call encodeURI() on this if the URL contains Unicode characters.
• target: The target in which to load the URL, an optional parameter that defaults to (String).
• _self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
• _blank: Opens in the InAppBrowser.
• _system: Opens in the system’s web browser.
• options: Options for the InAppBrowser. Optional, defaulting to: location=yes. (String)
• The options string must not contain any blank space, and each feature’s name/value pairs must be separated by a comma. Feature names are case insensitive.
• location: Set to yes or no to turn the InAppBrowser’s location bar on or off
• The InAppBrowser window behaves like a standard web browser, and can’t access Cordova APIs. For this reason, the InAppBrowser is recommended
• The InAppBrowser provides by default its own GUI controls for the user (back, forward, done).

Follow these steps for opening InAppBrowser Plugin.

Step 1:

Firstly we need to install the ionic cordova plugin.

npm install @ionic-native/in-app-browser

Step 2:

Here we are going to import the plugin, open app.module.ts and import the in-app browser.

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
InAppBrowser,
]</strong></span>

Step 3:

Now open the file where you want to implement this, for me it’s home.html

<button ion-button full color="primary (click)="openInAppBrowser(link)">open browser</button>

Step 4:

Now open home.ts

import { InAppBrowser,InAppBrowserOptions } from '@ionic-native/in-app-browser/ngx';
export class BrowserPage {
options : InAppBrowserOptions = {
location : 'no',<span style="color: #3366ff;"> //Or 'yes'</span>
presentationstyle : 'pagesheet',<span style="color: #3366ff;">//use for back to the app</span>
};
constructor(private iab: InAppBrowser){}
openInAppBrowser(url){
const browser = this.iab.create(url,'_blank',this.options);</pre>
<code>browser.executeScript(...); <span style="color: #3366ff;">//use to execute additional script</span>
browser.insertCSS(...); <span style="color: #3366ff;">//use to execute additional css</span>
browser.on(<span class="hljs-string">'loadstop'</span>).subscribe(<span class="hljs-function"><span class="hljs-params">event</span> =></span> {
   browser.insertCSS({ code: <span class="hljs-string">"body{color: red;"</span> });
});//<span class="hljs-string">loadstop - </span>identify when browser closed</code>
} }

Supported Platform: These are the supported

• AmazonFire OS
• Android
• Browser
• iOS
• macOS
• Windows

So we completed the tutorial which is “How to use InAppBrowser Plugin in ionic4“.

You can find my post on medium as well click here please follow me on medium as well.

You can find my next post here.

If have any query/issue, please feel free to ask.

Happy Coding Guys.

Neha Dwivedi

Hi, I am a professional Ionic and React Native Pixel Perfect App Designer and Developer, with expertise in Client Communication, Bug Fixing, Third Party Lib, Version Control Tools, Requirement Understanding, and managing teams, I have 6+ years of experience in the same domain as well as in Codeigniter, JS, IoT, and more than 10 other languages. For the last 6+ years, not a single day went without design/development.

Please follow me on Medium: https://nehadwivedi1004.medium.com/