Open Link in System Browser

ionic-v1
1

Hello,

I want to open a link in the system browser.

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

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

So what’s the problem?

3

Try running Ionic serve --lab

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

It works perfectly for me.

4

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

5

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.

6

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

 target="_system"

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

index.html:

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

    <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/ionic.app.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>
    <script>
    document.onclick = function (e) {
        e = e ||  window.event;
        var element = e.target || e.srcElement;

        if (element.tagName == 'A') {
            window.open(element.href, "_system");
            return false;
        }
    };
    </script>
</head>
<body ng-app="starter">
    <ion-nav-bar class="bar-stable">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
</body>
</html>

tab-dash.html:

<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="http://resper.de">
                <img src="img/icons/iconHome.png" alt="resper Homepage" />
            </a>
            <a class="openEx" href="https://www.facebook.com/ResperDe112">
                <img src="img/icons/iconFb.png" alt="Facebook" />
            </a>
            <a class="openEx" href="https://www.google.com/+ResperDe112">
                <img src="img/icons/iconGp.png" alt="Google+" />
            </a>
            <a class="openEx" href="https://www.google.com/+ResperDe112">
                <img src="img/icons/iconTwitter.png" alt="Twitter" />
            </a>
            <a class="openEx" href="https://de.pinterest.com/resper0579/">    
                <img src="img/icons/iconPinterest.png" alt="Pinterest" />
            </a>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>
7

It’s working for me.

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

Alternatie #1:
HTML:

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

JS:

  $scope.GotoLink = function (url) {
    window.open(link,'_system');
  }

Alternatively #2

You can use AngularJS and ng-bing-html. A tutorial is here: http://intown.biz/2014/03/30/cordova-ionic-links-in-browser/

8

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

9

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

10

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