使用离子应用程序内的系统浏览器打开所有链接

Question

我需要在我的应用程序的某个部分内的所有链接在系统浏览器中打开.诀窍是这些链接来自外部源(API),因此我无法添加ng-click帮助我在外部打开链接的功能.

我正在使用应用内浏览器插件(ng-cordova).事实上,我有其他外部打开的链接,但在这种情况下链接可以在内容的任何部分,所以我的问题是如何在加载后将ng-click指令添加到所有链接？或者如果可能,如何配置应用程序内浏览器插件以打开系统浏览器中的所有链接？

顺便说一句,简单的链接即使在inappbrowser中也不会打开:我点击它们没有任何反应.

谢谢您的帮助

Answer 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指令中,这样你就可以在多个控制器中使用它并保持它们更清洁.