angularjs – 使用离线应用程序中的系统浏览器打开所有链接

前端之家收集整理的这篇文章主要介绍了angularjs – 使用离线应用程序中的系统浏览器打开所有链接前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要在系统浏览器中打开我应用程序某一部分的所有链接.诀窍在于,这些链接来自外部源(API),因此我无法添加帮助我在外部打开链接的ng-click功能.

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

顺便说一下,简单的链接甚至不会在开放阅读器中打开:我点击它们,没有任何反应.

谢谢您的帮助

AFAIK没有一种自动执行的方式,您必须使用应用程序浏览器js代码在每个平台外部连续打开链接.

你的问题并没有给出一个清楚的例子,服务器返回什么,所以我假设你正在获得一个完整的html块,只是渲染在屏幕上.假设一个请求返回一些基本的东西:

  1. <div id="my-links">
  2. <a href='http://externallink.com'> External Link 1 </a>
  3. <a href='http://externallink.com'> External Link 2 </a>
  4. <a href='http://externallink.com'> External Link 3 </a>
  5. </div>

您的请求如下所示:

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

如果您可以访问服务器端并进行更改:

在您的请求中添加“inappbrowser”参数,以检测是否应返回inappbrowser兼容链接,并将响应从服务器更改为:

  1. if (inappbrowser) {
  2. <div id="my-links">
  3. <div ng-click='openExternal($event)' data-external='http://externallink.com'> External Link 1 </div>
  4. <div ng-click='openExternal($event)' data-external='http://externallink.com'> External Link 2 </div>
  5. <div ng-click='openExternal($event)' data-external='http://externallink.com'> External Link 3 </div>
  6. </div>
  7. } else {
  8. <div id="my-links">
  9. <a href='http://externallink.com'> External Link 1 </a>
  10. <a href='http://externallink.com'> External Link 2 </a>
  11. <a href='http://externallink.com'> External Link 3 </a>
  12. </div>
  13. }

并有一个通用的openExternal方法

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

如果您无法更改服务器端

解析响应并用ng点击替换链接

  1. $http.get('givemelinks').success(function(htmlData){
  2. htmlData = htmlData.replace(/href='(.*)'/,'ng-click="openExternal($event)" data-external="$1"').replace(/<a/,"<div").replace(/a>/,"div>")
  3. $scope.myContent = htmlData;
  4. })

并使用与上述相同的openExternal方法.

我正在用div替换锚点,以防止更改应用路线.这在每个应用程序中可能不是必需的.

为了使这个更好,你应该把它捆绑在一个开放的外部指令,所以你可以使用它在多个控制器,并保持清洁.

猜你在找的Angularjs相关文章