Откройте все ссылки, используя системный браузер внутри ионного приложения

Мне нужно, чтобы все ссылки внутри определенного раздела моего приложения открывались в системном браузере. Хитрость заключается в том, что эти ссылки поступают из внешнего источника (API), поэтому я не могу добавить функцию ng-click, которая помогает мне открывать ссылки извне.

Я использую плагин в приложении-браузере (ng-cordova). На самом деле у меня есть другие ссылки, которые открываются извне, но в этом случае ссылки могут быть в любой части содержимого, поэтому мой вопрос заключается в том, как я могу добавить директиву ng-click ко всем ссылкам после их загрузки? или, если возможно, как настроить плагин в приложении-браузере, чтобы открыть ВСЕ ссылки в системном браузере?

Кстати, простые ссылки не открываются даже в inappbrowser: я нажимаю на них, и ничего не происходит.

Спасибо за помощь

Ответы

Ответ 1

AFAIK нет способа сделать это автоматически, вы должны использовать код приложения js в приложении, чтобы открывать ссылки внешне последовательно на каждой платформе.

Ваш вопрос не дает ясного примера того, что возвращает сервер, поэтому я предполагаю, что вы получаете полный блок html и просто показываете его на экране. Предположим, что запрос возвращает что-то основное:

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

И ваш запрос выглядит так:

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

Если у вас есть доступ к серверу и вы можете внести изменения:

Добавьте параметр "inappbrowser" в ваш запрос, чтобы определить, должен ли он возвращать ссылки, совместимые с inappbrowser, и изменять ответ с вашего сервера, чтобы быть чем-то вроде:

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

И иметь общий метод openExternal:

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

Если вы не можете изменить серверную сторону

Разберите ответ и замените ссылки на 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;
})

И используйте тот же метод openExternal, что и выше.

Я заменяю якоря на div, чтобы предотвратить изменение маршрутов приложений. Это может быть необязательно в каждом приложении.

Чтобы сделать это еще лучше, вы должны связать его в директиве open-external, чтобы вы могли использовать его в нескольких контроллерах и держать их чище.

Ответ 3

Поскольку HTML уже отображается, когда дело доходит до Angular, а плагин inAppBrowser работает только в том случае, если он вызван явным Javascript, вы ничего не можете сделать, что не требует ручного изменения HTML или простого javascript.

Изменение HTML - это просто плохая идея, особенно если вы попытаетесь сделать это с помощью сопоставления регулярных выражений.

Это оставляет 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");
        }
      }
    });
}

Ответ 4

Установите следующий плагин:

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

Теперь вы можете использовать _system, _blank или _self для адресата:

window.open(url, '_blank');

Дополнительная информация: https://www.thepolyglotdeveloper.com/2014/07/launch-external-urls-ionicframework/

Ответ 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>

В контроллере - 

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

    })