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.

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

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


[youtube https://www.youtube.com/watch?v=tqbmsOn_n1E]

YouTube Link: https://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’);

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

    <access origin="*"></access>
    <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 *