web-dev-qa-db-ja.com

ionicアプリ内でシステムブラウザを使用してすべてのリンクを開きます

アプリの特定のセクション内のすべてのリンクをシステムブラウザーで開く必要があります。トリックは、それらのリンクが外部ソース（API）からのものであるため、外部でリンクを開くのに役立つng-click関数を追加できないことです。

私はin-app-browserプラグイン（ng-cordova）を使用しています。実際、外部で開く他のリンクがありますが、この場合、リンクはコンテンツのどの部分にも含まれる可能性があるため、ロード後にすべてのリンクにng-clickディレクティブを追加するにはどうすればよいですか？または可能であれば、システムブラウザですべてのリンクを開くようにアプリ内ブラウザプラグインを設定するにはどうすればよいですか？

ちなみに、単純なリンクはinappbrowserでも開かない：私はそれらをタップしても何も起こらない。

助けてくれてありがとう

angularjscordovaionic-frameworkinappbrowser
16
Sebastian Hernandez

私の知る限り、これを自動的に行う方法はありません。すべてのプラットフォームで外部から一貫してリンクを開くには、アプリのブラウザーの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ディレクティブにバンドルして、複数のコントローラーで使用できるようにし、それらをよりクリーンに保つ必要があります。

6
caiocpricci2

次のように、デフォルトのリンクタグ機能を上書きできます。

https://www.thepolyglotdeveloper.com/2014/12/open-dynamic-links-using-cordova-inappbrowser/

ベスト、

2
Nic Raboy

次のプラグインをインストールします。

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/

2
Eduardo Cuomo

Angularの場合、HTMLは既にレンダリングされており、inAppBrowserプラグインは明示的なJavascriptから呼び出された場合にのみ機能するため、手動でHTMLを変更したり、プレーンなJavaScriptを使用したりすることなくできることはありません。

特に正規表現マッチングを使用してHTMLを変更しようとする場合、HTMLの変更は単にBadIdea®です。

それは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>

コントローラ内-

 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