Åben alle links ved hjælp af systemet browser inde i en ionisk app

Jeg har brug for, at alle links inde i en bestemt del af min app er åben i systemet browser. Tricket er, at disse links kommer fra en ekstern kilde (API), så jeg kan ikke tilføje ng-click funktion, der hjælper mig med at åbne links eksternt.

Jeg bruger in-app-browser plugin (ng-cordova). Jeg har faktisk andre links, der åbner eksternt, men i dette tilfælde er de links, der kan være i nogen del af indholdet, så mit spørgsmål er hvordan kan jeg tilføje ng-klik direktiv for alle links og henvisninger, efter at de er fyldt? eller, hvis det er muligt, hvordan man config in-app-browser plugin til at åbne ALLE links i systemet browser?

Af den måde, de simple links ikke åbner selv i inappbrowser: jeg trykker på dem, og der sker ikke noget.

Tak for hjælpen

Du siger, at de links, der kommer fra en API. Så hvorfor ikke du indse en grundlæggende søge og erstatte i strygerne, som du får fra API, ved hjælp af Javascript regex for eksempel?
Er, at den eneste måde at gøre dette på? jeg mener, jeg kan iterere gennem alle <a> elementer, men jeg forsøgte at undgå det, jeg troede, at der kunne være en måde at opnå dette på globalt plan, måske konfiguration af in-app-browser-plugin eller noget i den retning
Aa AngularJS ikke automagisk opfange vanille JavaScript opkald, det kan ikke erstatte dem med kantede direktiver, der enten
Jeg spekulerer på, om dette kan opnås ved hjælp af inappbrowser.loadstart begivenhed at lytte?

OriginalForfatteren Sebastian Hernandez | 2016-01-27

5 svar

  1. 5

    AFAIK er der ikke en måde at gøre det automatisk, skal du bruge in-app browser js kode til at åbne links eksternt konsekvent i hver platform.

    Dit spørgsmål ikke giver et klart eksempel på, hvad serveren returnerer, så jeg antager, at du får en fuld blok af html og er bare gøre det på skærmen. Under forudsætning af en anmodning vende tilbage til noget grundlæggende som :

    <div id="my-links">
       <a href='http://externallink.com'> External Link 1 </a>
       <a href='http://externallink.com'> External Link 2 </a>
       <a href='http://externallink.com'> External Link 3 </a>
    </div>

    Og din anmodning ligner:

    $http.get('givemelinks').success(function(htmlData){
       $scope.myContent = htmlData;
    })

    Hvis du har adgang til server-side, og kan foretage ændringer:

    Tilføje et “inappbrowser” parameter at din anmodning om at opdage, hvis det skal returnere inappbrowser kompatible links og ændre svar fra din server til at være noget i retning af:

    if (inappbrowser) {
    <div id="my-links">
       <div ng-click='openExternal($event)' data-external='http://externallink.com'> External Link 1 </div>
       <div ng-click='openExternal($event)' data-external='http://externallink.com'> External Link 2 </div>
       <div ng-click='openExternal($event)' data-external='http://externallink.com'> External Link 3 </div>
    </div>
    } else {
     <div id="my-links">
       <a href='http://externallink.com'> External Link 1 </a>
       <a href='http://externallink.com'> External Link 2 </a>
       <a href='http://externallink.com'> External Link 3 </a>
    </div>
    }

    Og har en generisk openExternal metode:

    $scope.openExternal = function($event){
      if ($event.currentTarget && $event.currentTarget.attributes['data-external'])
      window.open($event.currentTarget.attributes['data-external'], '_blank', 'location=yes');
    }

    Hvis du ikke kan ændre den server side

    Parse svar og erstatte links med ng-klik:

    $http.get('givemelinks').success(function(htmlData){
       htmlData = htmlData.replace(/href='(.*)'/,'ng-click="openExternal($event)" data-external="$1"').replace(/<a/,"<div").replace(/a>/,"div>")
       $scope.myContent = htmlData;
    })

    Og bruge den samme openExternal metode som ovenfor.

    Jeg er udskiftning af ankre med divs til at forhindre ændring af app ruter. Der kan ikke være nødvendige i hver app.

    For at gøre det endnu bedre, bør du samle det i en open-external direktiv, så du kan bruge det i flere controllere og holde dem renere.

    Når jeg prøvede dit svar, jeg kunne stadig ikke åbne links i min app. Når jeg er logget $event.currentTarget.attributes['data-external'] til konsollen jeg så: data-external="http://loremipsum.com/". Window.open() behov som første parameter er et link ikke data-external= i front af det. Så jeg tilføjet .value at $event.currentTarget.attributes['data-external'] og når jeg er logget der ($event.currentTarget.attributes['data-external'].value) til konsollen jeg så kun link, og vigtigere endnu, når jeg har erstattet den første parameter i window.open() med det jeg var i stand til at åbne links.

    OriginalForfatteren caiocpricci2

  2. 2

    Fordi HTML er allerede gjort, når det kommer til Kantede, og de inAppBrowser plugin virker kun, hvis den kaldes ved udtrykkelig Javascript, der er intet du kan gøre, som ikke indebærer manuelt at ændre HTML eller almindelig javascript.

    Ændre HTML er bare en Dårlig Idé®, især hvis du forsøger at gøre det ved at bruge regex matchende.

    Der efterlader javascript:

    Restangular.all('stories').getList().then(function(stories){
      $scope.stories = stories;
      updateLinks();
    });
    
    function updateLinks(){
      //use $timeout wait for items to be rendered before looking for links
      $timeout(function(){
          var $links = document.querySelectorAll(".stories .story a");
          for(var i =0; i < $links.length; i++) {
            var $link = $links[i];
            var href = $link.href;
            console.log("Hijacking link to ", href);
            $link.onclick = function(e){
              e.preventDefault();
              var url = e.currentTarget.getAttribute("href");
              window.cordova.inAppBrowser.open(url, "_system");
            }
          }
        });
    }

    OriginalForfatteren you786

  3. 0
    <ul>
    <li> <a href="#"  ng-click='openlink($event)' data-link='https://www.link1.com'> Link 1 </a></li>  
    <li> <a href="#"  ng-click='openlink($event)' data-link='https://www.link2.com'> Link2 </a></li>  
    <li> <a href="#"  ng-click='openlink($event)' data-link='https://www.link3.com'> Link 3 </a></li>  
    </ul>

    I controller –

     angular.module('app', [])
        .controller('LinkCtrl', function($scope) {
             $scope.openlink = function($event)
                {               
                  if ($event.currentTarget && $event.currentTarget.attributes['data-link'])
                        {
                       window.open($event.currentTarget.attributes['data-link'], '_system', 'location=yes');
                        }
                    }
    
        })

    OriginalForfatteren Avneesh Kumar

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *