Launch External URLs with IonicFramework

fuente: http://blog.nraboy.com/2014/07/launch-external-urls-ionicframework/

I recently found myself needing to launch external URLs with IonicFramework.  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.

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:

Install Plugin

Shell

1	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:

example.html

XHTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<ion-view title="Test Page">     <ion-content>         <div class="list">             <a class="item" href="#" onclick="window.open('http://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.

Code	Description
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.