PhoneGap InAppBrowser plugin works according to its name. It opens a new browser window within the application,i.e., no external browser needed to open links in the application.

Benefits: 

  • It gives you the ability to access web content within the application itself.
  • You don’t need to open the documents, pdf’s or web pages in any external browser.
  • Very easy to use and works exactly like any other browser.

You just need to call cordova.InAppBrowser.open() with the URL to open and “_blank” if you want the URL to open in the new window.


phonegap inappbrowser img


Idea Of The App:

Features

  1. It simply opens the link within the app’s browser rather than the system’s browser installed in the device.

Technologies Used

jQuery Mobile : For Interface / UI Designing

  • We’re going to use jQuery Mobile for designing interface.

Let’s Take a look at the PhoneGap’s In-app browser.

PhoneGap’s Inappbrowser

Methods

  • addEventListener : Adds a listener.
    ref.addEventListener(eventname, callback);
  • removeEventListener : Removes a listener.
    ref.removeEventListener(eventname, callback);
  • close : It closes the inappbrowser window.
    ref.close();
  • show : This is used to display the inappbrowser manually.
    ref.show();
  • executeScript : It is used to inject JS code into the inappbrowser window.
    ref.executeScript(details, callback);
  • insertCSS : It is used to inject CSS code into the inappbrowser window.
    ref.insertCSS(details, callback);

Object

  • InAppBrowser

Properties

  • type: It is used to specify the type of event -> loadstart, loadstop, loaderror, or exit.
  • url: URL which is loaded.
  • code: Error code (only for loaderror).
  • message: Error message (only for loaderror).

We’re going to use only ‘cordova.InAppBrowser.open’ in our application.

cordova.InAppBrowser.open

var ref = cordova.InAppBrowser.open(url, target, options);
  • ref: It is the reference to the in-app browser window.
  • url: It is the URL which user wants to load.
  • target: It specifies that whether url is going to open in the same window, i.e, Cordova’s Web view.
    • _self: url is going to get open in the same window.
    • _blank: url is going to get open in the new window.
    • _system: url is going to get open in the system’s browser.
  • options: Inappbrowser’s options.
    • location: It is used to turn on and off the in-app browser’s location bar.

Note: There’re several other options available for respective platforms (Android, IOS and Windows).

Files :

HTML File : Index.html

<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.addEventListener Example</title>

<!--Stylesheet Files : jQuery Mobile CSS File, Customized CSS File and Font Awesome for icons -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="css/my.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

<!--jQuery File : Library, Mobile Library, Cordova JS and Customized JS File -->
<script type="text/javascript" charset="utf-8" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/my.js"></script>
</head>

<!--Beginning of the Body-->
<body>
<div data-role="page">

<!--Header Bar-->
<div data-role="header" data-position="fixed" class="ui-header ui-bar-a ui-header-fixed slidedown" role="banner">
<center><h1>Open Me</h1></center>
</div>
<div data-role="main" class="ui-content" id="main">
<center><p id="heading">PhoneGap InappBrowser Plugin</p></center>

<!--Text box and go button div-->
<center><label for="text-basic">Enter Any Website without http://www:</label></center>
<input type="text" name="text-basic" id="text-basic" value="">
<button id="go" class="ui-btn">Go</button>
<!--End of the text box div-->

</div>
</div>
</body>
<!--End of the Body-->
</html>

JavaScript File : my.js

<!--Event listener to call device ready function-->
document.addEventListener("deviceready", onDeviceReady, false);

<!--Definition of device ready function-->
function onDeviceReady() {

<!--Onclick function on Go button-->
$(document).on('click', '#go', function(){

<!--Grabbing the website-->
var website = $("#text-basic").val();

<!--Opens the link in the in-app browser-->
window.open = cordova.InAppBrowser.open;
var ref = window.open("http://www."+website, '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
ref.addEventListener('exit', function(event) { alert(event.type); });
});
}

CSS File : My.css

.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {
border: 1px solid #005994 !important;
background: #0093EA !important;
color: #fff !important;
font-weight: bold !important;
text-shadow: 0 0 #eee !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA), to( #007dcd ));
background-image: -webkit-linear-gradient( #0093EA , #007dcd );
background-image: -moz-linear-gradient( #0093EA, #007dcd );
background-image: -ms-linear-gradient( #0093EA , #007dcd );
background-image: -o-linear-gradient( #0093EA , #007dcd );
background-image: linear-gradient( #0093EA , #007dcd );
}
.ui-page-theme-a .ui-btn:hover, html .ui-bar-a .ui-btn:hover, html .ui-body-a .ui-btn:hover, html body .ui-group-theme-a .ui-btn:hover, html head + body .ui-btn.ui-btn-a:hover{
border: 1px solid #007dcd;
background: #333 ;
font-weight: bold;
text-shadow: 0 0 #eee !important;
color: #fff !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA ), to( #0093EA ));
background-image: -webkit-linear-gradient( #0093EA , #0093EA );
background-image: -moz-linear-gradient( #0093EA , #0093EA );
background-image: -ms-linear-gradient( #0093EA , #0093EA );
background-image: -o-linear-gradient( #0093EA , #0093EA );
background-image: linear-gradient( #0093EA , #0093EA );
}
.ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head + body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active {
background-color: #0093EA !important ;
border-color:#0093EA !important;
color: #fff ;
text-shadow: 0 1px 0 #005599 ;
}
img{
padding-bottom: 25px;
}
button.ui-btn, .ui-controlgroup-controls button.ui-btn-icon-notext {
border-radius: 5px !important;
}
#searchbutton{
margin-bottom: 25px;
}
#main{
margin-top: -1% !important ;
}
.ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content
{
background-color: #ddd;
color: #111;
}
.ui-collapsible-content {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
overflow: hidden;
}
.ui-collapsible-content-collapsed {
display: block;
height: 0;
padding: 0 16px;
}
#bt i{
font-weight: bold;
}
th {
border-bottom: 1px solid #d6d6d6 !important;
}
tr:nth-child(even) {
background: #e9e9e9 !important;
}
.ui-table {
margin-top: 3% !important;
border: 1px solid grey !important;
border-radius: 5px !important;
border-collapse: initial !important;
}
label{
font-weight: bold !important;
}
#label{
border: 1px solid #0093EA !important;
background: #fff !important;
color: #005994 !important;
font-weight: bold !important;
text-shadow: 0 0 #eee !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA), to( #007dcd ));
background-image: -webkit-linear-gradient( #0093EA , #007dcd );
background-image: -moz-linear-gradient( #0093EA, #007dcd );
background-image: -ms-linear-gradient( #0093EA , #007dcd );
background-image: -o-linear-gradient( #0093EA , #007dcd );
background-image: linear-gradient( #0093EA , #007dcd );
}
#utable tr:nth-child(even){
background: inherit !important;
}
#heading{
font-weight: bold;
font-size: 30px;
}
#btndiv{
margin-top: 3%;
}
@media ( max-width: 35em ) {
.ui-table-reflow.ui-responsive td,
.ui-table-reflow.ui-responsive th {
width: auto;
float: none;
clear: none;
display: table-cell;
margin: 0;
padding:0;
}
}
#btndiv .ui-bar-a{
width: 50% !important;
margin: auto !important;
}

Conclusion:

Inappbrowser lets you avoid the pop ups popping up every time asking to choose one of the system browser in which one wants to open the link.

Instead it opens the link in the app’s browser. Isn’t that cool? Ofcourse it is. I hope it gave you a fine idea about inappbrowser. Keep reading our posts.