Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Launch External URLs with Ionic Framework

TwitterFacebookRedditLinkedInHacker News

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

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

window.open(‘http://example.com’, ‘_system’);Loads in the system browser
window.open(‘http://example.com’, ‘_blank’);Loads in the InAppBrowser
window.open(‘http://example.com’, ‘_blank’, ‘location=no’);Loads in the InAppBrowser with no location bar
window.open(‘http://example.com’, ‘_self’);Loads in the Cordova web view

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

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.