Öffnen Sie alle Links mit System-Browser in einer ionischen App

Question

Ich brauche alle Links in einem bestimmten Abschnitt meiner App im System-Browser geöffnet. Der Trick ist, dass diese Links von einer externen Quelle (einer API) kommen, so dass ich die Funktion ng-click nicht hinzufügen kann, die mir hilft, die Links extern zu öffnen.

Ich verwende In-App-Browser Plugin (ng-Cordova). In der Tat habe ich andere Links, die extern öffnen, aber in diesem Fall können die Links in irgendeinem Teil des Inhalts sein, also meine Frage wäre, wie könnte ich die ng-click-Direktive zu allen Links hinzufügen, nachdem sie geladen sind? oder wenn es möglich ist, wie man das In-App-Browser Plugin konfiguriert, um ALLE Links im System Browser zu öffnen?

Die einfachen Links öffnen übrigens auch im inappbrowser nicht: Ich tippe auf sie und es passiert nichts.

Danke für die Hilfe

Answer 1

AFAIK gibt es keine Möglichkeit, dass automatisch zu tun, Sie die in App-Browser js Code Links zu öffnen extern konsequent in jeder Plattform verwenden.

Ihre Frage gibt kein klares Beispiel dafür, was der Server zurückgibt, also gehe ich davon aus, dass Sie einen vollständigen Block von html bekommen und es nur auf dem Bildschirm rendern. Unter der Annahme einer Anfrage Rückkehr etwas Grundsätzliches wie:

<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> 

Und Ihre Anfrage wie folgt aussieht:

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

Wenn Sie Zugriff auf die Server-Seite und kann Änderungen vornehmen:

hinzufügen " inappbrowser "Parameter zu Ihrer Anfrage, um zu erkennen, ob es inappbrowser kompatible Links zurückgeben soll und ändern Sie die Antwort von Ihrem Server so:

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> 
} 

Und eine allgemeine openExternal Methode haben:

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

Wenn Sie die Server-Seite

Analyse der Antwort und die Links mit ng-Klicks ersetzen ändern können:

$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; 
}) 

Und verwenden Sie die gleiche openExternal-Methode wie oben.

Ich ersetze die Anker durch divs, um zu verhindern, dass die App-Routen geändert werden. Das ist möglicherweise nicht in jeder App notwendig.

Um dies noch besser zu machen, sollten Sie es in einer open-external Richtlinie bündeln, damit Sie es in mehreren Controllern verwenden können und sie sauberer halten.

Answer 2

können Sie die Standard-Link-Tag Funktionalität außer Kraft setzen, wie hier zu sehen:

https://blog.nraboy.com/2014/12/open-dynamic-links-using-cordova-inappbrowser/

Best,

Answer 3

Da die HTML bereits gemacht wird, wenn es um Angular kommt, und das inAppBrowser Plugin funktioniert nur, wenn Durch explizites JavaScript aufgerufen, gibt es nichts, was Sie tun können, ohne den HTML-Code manuell zu ändern oder einfaches JavaScript zu verwenden.

Das Ändern des HTML ist nur eine schlechte Idee®, besonders wenn Sie es versuchen, indem Sie Regexabgleich tun.

, dass Javascript lässt:

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"); 
     } 
     } 
    }); 
} 

Answer 4

Installieren nächsten Plugin:

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

Jetzt können Sie _system verwenden, _blank oder _self für Ziel:

window.open(url, '_blank'); 

Weitere Informationen: https://www.thepolyglotdeveloper.com/2014/07/launch-external-urls-ionicframework/

Answer 5

<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> 

In 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'); 
        } 
       } 

    })