Launch External URLs with Ionic Framework

I recently found myself needing to launch external URLs with Ionic Framework. I needed to let my users contact me via my personal website or visit my Twitter page. This is not a task that ends well when trying to execute from an Ionic view. Luckily, with a little help from the Apache Cordova plugin InAppBrowser, I was able to accomplish the task with very little effort. The best part is that it works for iOS and Android with the same code set.

If you’re using Ionic 2, a special version of this article can be found here. Otherwise enjoy this writeup for Ionic Framework 1.

To make use of this great plugin, using a command prompt navigate to the root of your Ionic project. Run the following command to download and install the InAppBrowser plugin to your project:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

From this point, you don’t need any extra code in your app.js file. The launching of external pages can be done directly from your view. Take the following example:

<ion-view title="Test Page">
    <ion-content>
        <div class="list">
            <a class="item" href="#" onclick="window.open('https://www.nraboy.com/contact', '_system', 'location=yes'); return false;">
                Open a Browser
            </a>
            <a class="item" href="#" onclick="window.open('http://www.twitter.com/nraboy', '_system', 'location=yes'); return false;">
                Open a Twitter Client or Browser
            </a>
            <a class="item" href="#" onclick="window.open('https://plus.google.com/+NicRaboy', '_system', 'location=yes'); return false;">
                Open a Google+ Client or Browser
            </a>
        </div>
    </ion-content>
</ion-view>

As described in the wiki, there are several ways to launch the InAppBrowser and all perform differently.

I personally prefer the native experience which the _system option seems to provide. Note that if you run the InAppBrowser code via a web browser it will just open a new page.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.