Open Link in System Browser



I want to open a link in the system browser.

I installed InAppBrowser and set as target _system in my template:

<a href="" target="_system">
    <img class="openEx" id="openHp" src="img/icons/iconHome.png" alt="resper Homepage" />


So what’s the problem?


Try running Ionic serve --lab

Where about did you add it? It should be added inside Index.html header.

It works perfectly for me.


It doesnt open the link in the system browser. It open it in the app.


I add the code. When I run the app in my browser (Riddle) it open a new tab when i click the link. When I create a APK and run it on my Android Device it open the link inside the app.


Ok, back to start, it open in the Browser the new Tab because of the


in the Tag. So it seems like the code have no effect.


<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/" rel="stylesheet">
    <!-- ionic/angularjs js -->
    <script src="js/ionic.bundle.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    document.onclick = function (e) {
        e = e ||  window.event;
        var element = || e.srcElement;

        if (element.tagName == 'A') {
  , "_system");
            return false;
<body ng-app="starter">
    <ion-nav-bar class="bar-stable">


<ion-view view-title="Notfallsanitäter Hessen">
  <ion-content class="padding">
    <div class="list card">
      <div class="item item-divider">Mehr von [res][per]</div>
      <div class="item item-body">
        <div class="contactRow">
            <a class="openEx" href="">
                <img src="img/icons/iconHome.png" alt="resper Homepage" />
            <a class="openEx" href="">
                <img src="img/icons/iconFb.png" alt="Facebook" />
            <a class="openEx" href="">
                <img src="img/icons/iconGp.png" alt="Google+" />
            <a class="openEx" href="">
                <img src="img/icons/iconTwitter.png" alt="Twitter" />
            <a class="openEx" href="">    
                <img src="img/icons/iconPinterest.png" alt="Pinterest" />


It’s working for me.

Alternatively, you can set it up with a ng-click:

Alternatie #1:

<a ng-click="GotoLink('')">
   <img class="openEx" id="openHp" src="img/icons/iconHome.png" alt="resper Homepage" />


  $scope.GotoLink = function (url) {,'_system');

Alternatively #2

You can use AngularJS and ng-bing-html. A tutorial is here:


Perhaps it is a problem because I am working with Microsoft Visual Studio.


Shouldn’t be. However, i would recommend using Sublime Text 3.


The Error was the img tag, when i click on the image it doesn’t give back “a” it give back “img”