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

Sebastian Hernandez 发表于 Dev

塞巴斯蒂安·埃尔南德斯（Sebastian Hernandez）

我需要在系统浏览器中打开应用程序特定部分内的所有链接。诀窍是这些链接来自外部资源（API），因此我无法添加ng-click帮助我从外部打开链接的功能。

我正在使用应用程序内浏览器插件（ng-cordova）。实际上，我还有其他可在外部打开的链接，但是在这种情况下，这些链接可以位于内容的任何部分，因此我的问题是，如何在所有链接加载后向所有链接添加ng-click指令？还是有可能，如何配置应用内浏览器插件以在系统浏览器中打开所有链接？

顺便说一句，即使在应用程序浏览器中，简单链接也不会打开：我点击它们，没有任何反应。

谢谢您的帮助

caiocpricci2

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指令中，以便可以在多个控制器中使用它并保持它们更整洁。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。