IONIC APP – Open External Links In Mobile Browser

Advertisement:

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.

ionic

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

1
npm install ionic -g
1
npm install cordova -g

Step 3: Install inappbrowser plugin

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

OR

1
cordova plugin add org.apache.cordova.inappbrowser

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

1
2
3
4
<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


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=tqbmsOn_n1E [Watch the Video In Full Screen.]



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’);

Example App:
You can see how the URLs open in the mobile browser in this app MobiSphere.in

Advertisements

4 thoughts on “IONIC APP – Open External Links In Mobile Browser”

  1. Thank you for this tutorial, but unfortunately this isn’t working for me, when testing on a device it doesn’t do anything, nothing opens. Is this still working on the current version of ionic and inappbrowser?

  2. To be clear,

    We must add:
    1. to config.xml

    <access origin="*"></access>

    2. to index.html

    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

    3. install WhiteList plugin

    cordova-plugin-whitelist

Leave a Reply

Your email address will not be published. Required fields are marked *