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

Question

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

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

顺便说一下，即使在 inappbrowser 中也无法打开简单链接：我点击它们但没有任何反应。

感谢帮助

Answer 1

据我所知，没有办法自动执行此操作，您必须使用应用内浏览器 js 代码在每个平台上一致地从外部打开链接。

你的问题没有给出服务器 return 的明确示例，所以我假设你得到的是 html[=41= 的完整块] 并且只是在屏幕上渲染它。假设请求 return 一些基本的东西，比如：

<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" 参数以检测它是否应该 return 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=""').replace(/<a/,"<div").replace(/a>/,"div>") $scope.myContent = htmlData; })

并使用与上面相同的 openExternal 方法。

我正在用 div 替换锚点以防止更改应用程序路由。这可能不是每个应用程序都需要的。

为了让它变得更好，你应该将它捆绑在一个 open-external 指令中，这样你就可以在多个控制器中使用它并保持它们更干净。

Answer 2

您可以覆盖默认的 link 标签功能，如下所示：

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

最佳，

Answer 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");
        }
      }
    });
}

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

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

    })

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

Open all links using system browser inside an ionic app

angularjs

cordova

inappbrowser

ionic-framework