---
title: "Cordova – Using InAppBrowser"  
description: "There are links into the app that are sometimes need to be open, to open those links a mobile web browser is needed. A browser only can render the htm"  
author: "Anonymous User"  
published: 2017-05-01  
updated: 2018-03-19  
canonical: https://www.mindstick.com/blog/11368/cordova-using-inappbrowser  
category: "apache cordova"  
tags: ["mobile development", "apache", "cordova", "apache cordova"]  
reading_time: 2 minutes  

---

# Cordova – Using InAppBrowser

There are **links** into the app that are sometimes need to be open, to open those links a mobile [web browser](https://www.mindstick.com/blog/301688/best-web-browsers-for-2023) is needed. A browser only can render the html files, so you have to include the In-app browser during the [building](https://www.mindstick.com/blog/23088/which-tonewood-is-suitable-for-building-a-guitar) of the app.\

This [Apache Cordova](https://www.mindstick.com/blog/11353/creating-first-application-using-cordova) plugin is used for opening web browser inside the app build on Cordova.

**Step 1 – [Install](https://www.mindstick.com/articles/12876/the-top-5-reasons-to-buy-and-install-a-tonneau-cover) the Plugin**

Open the [command prompt](https://answers.mindstick.com/qa/51716/how-to-make-bootable-pendrive-using-cmd-windows-command-prompt) window and type the following code:

```
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser
```

## Step 2 – Adding a button

We will create a **button** that will be used for opening inAppBrowser window in index.html file.

**Step 3 - Adding [Event Listener](https://www.mindstick.com/interview/529/how-to-remove-the-event-listener)**

Now, you have to add an event listener for the button inside onDeviceReady [function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) in index.js file.

```
document.getElementById("BrowserOpen").addEventListener("click", BrowserOpen);
```

## Step 4 - Creating Function

In this step, you will be creating a function that will open browser inside our app. We are assigning it to the [variable](https://www.mindstick.com/articles/1807/objective-c-data-types-variables-object-creation) ‘ref’ that we can use later to add [event listeners](https://www.mindstick.com/forum/159117/how-do-you-handle-events-using-jquery-and-attach-event-listeners-to-elements).

```
function BrowserOpen() {
   var url = 'https://cordova.apache.org';   var target = '_blank';
   var options = "location=yes"   var ref = cordova.InAppBrowser.open(url, target, options);
   ref.addEventListener('loadstart', loadstartCallback);   ref.addEventListener('loadstop', loadstopCallback);   ref.addEventListener('loadloaderror', loaderrorCallback);   ref.addEventListener('exit', exitCallback);
   function loadstartCallback(event) {      console.log('Loading started: '  + event.url)   }
   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }
   function loaderrorCallback(error) {      console.log('Loading error: ' + error.message)   }
   function exitCallback() {
      console.log('Browser is closed...')   }}
```

---

Original Source: https://www.mindstick.com/blog/11368/cordova-using-inappbrowser

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.