IONIC APP – Open External Links In Mobile Browser

Ionic apps are developed with angular code, so people start using ng-href to point to URLs which has {{}} variables whose value will be dynamically loaded. With ng-href IONIC treats the links like internal links and hence opens them within the application itself. To solve this, we make use of onclick and window.open() methods.

Note: Am using Windows 7 to illustrate this tutorial.

In this tutorial I’ll show you the exact code you need to do this effectively: To open the external URL in mobiles browser.

Step 1: You need node.js installed on your computer.
Step 2: Install cordova and ionic

npm install ionic -g

npm install cordova -g

Step 3: Install inappbrowser plugin

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

OR

cordova plugin add org.apache.cordova.inappbrowser

Step 4: Insert the code in your view (html files)

<a class="button button-assertive" 
   ng-href="http:// url .com/{{id}}/discount"
   onclick='window.open(this.href, "_system", "location=yes"); return false;'>
</a>

This way, the variables in the ng-href interpolates and then is being inserted as first parameter to window.open() method.

IONIC APP – Open External Links In Mobile Browser

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