web-dev-qa-db-fra.com

Ouvrir tous les liens en utilisant le navigateur du système dans une application ionique

J'ai besoin que tous les liens dans une certaine section de mon application soient ouverts dans le navigateur du système. L'astuce est que ces liens proviennent d'une source externe (une API), je ne peux donc pas ajouter la fonction ng-click qui m'aide à ouvrir les liens de manière externe.

J'utilise dans le navigateur de l'application plugin (ng-cordova). En fait, d’autres liens s’ouvrent à l’extérieur, mais dans ce cas, les liens peuvent figurer dans n’importe quelle partie du contenu. Je voudrais donc savoir comment ajouter la directive ng-click à tous les liens après leur chargement. ou si c'est possible, comment configurer le plug-in in-app-browser pour ouvrir TOUS les liens dans le navigateur système?

À propos, les liens simples ne s'ouvrent pas, même dans le navigateur non connecté: je les tape et rien ne se passe.

Merci pour l'aide

angularjscordovaionic-frameworkinappbrowser
15
Sebastian Hernandez

Autant que je sache, il n’ya aucun moyen de le faire automatiquement, vous devez utiliser le code js du navigateur de l’application pour ouvrir les liens de manière externe et cohérente sur toutes les plateformes.

Votre question ne donne pas un exemple clair de ce que le serveur renvoie, alors je suppose que vous obtenez un bloc complet de html et que vous ne faites que le restituer à l'écran. En supposant qu'une demande retourne quelque chose de base comme:

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

Et votre demande ressemble à:

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

Si vous avez accès au côté serveur et pouvez apporter des modifications:

Ajoutez un paramètre "inappbrowser" à votre demande pour détecter si elle doit renvoyer des liens compatibles inappbrowser et modifier la réponse de votre serveur pour qu'elle ressemble à ceci:

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

Et avoir une méthode openExternal générique:

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

Si vous ne pouvez pas changer le côté serveur

Analyser la réponse et remplacer les liens par ng-clicks:

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

Et utilisez la même méthode openExternal que ci-dessus.

Je remplace les ancres par des divs pour éviter de modifier les itinéraires des applications. Cela pourrait ne pas être nécessaire dans chaque application.

Pour que cela soit encore meilleur, vous devriez l'associer à une directive open-external afin de pouvoir l'utiliser dans plusieurs contrôleurs et les garder plus propres.

5
caiocpricci2

Vous pouvez remplacer la fonctionnalité de balise de lien par défaut comme indiqué ici:

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

Meilleur,

2
Nic Raboy

Installez le prochain plugin:

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

Maintenant, vous pouvez utiliser _system, _blank ou _self pour la destination:

window.open(url, '_blank');

Plus d'infos: https://www.thepolyglotdeveloper.com/2014/07/launch-external-urls-ionicframework/

2
Eduardo Cuomo

Étant donné que le code HTML est déjà rendu lorsqu'il s'agit de Angular et que le plug-in inAppBrowser ne fonctionne que s'il est appelé par Javascript explicite, vous ne pouvez rien faire qui n'implique pas de modifier manuellement le code HTML ou d'utiliser du javascript simple.

Changer le code HTML n’est qu’une mauvaise idée, surtout si vous essayez de le faire en utilisant la correspondance rationnelle.

Cela laisse 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");
        }
      }
    });
}
2
you786
<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>

Dans le contrôleur -

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

    })
0
Avneesh Kumar