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

I need that all links inside a certain section of my app open in the system browser. The trick is that those links come from an external source (an API) so I can't add the ng-click function that helps me to open the links externally.

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

I'm using in-app-browser plugin (ng-cordova). In fact I have other links that open externally but in this case the links can be in any part of the content so my question would be how could I add the ng-click directive to all links after they are loaded? or if it's possible, how to config in-app-browser plugin to open ALL links in system browser?

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

By the way, the simple links don't open even in the inappbrowser: I tap on them and nothing happens.

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

Thanks for the help

谢谢您的帮助

5 个解决方案

#1

AFAIK there isn't a way of doing that automatically, you must use the in app browser js code to open links externally consistently in every platform.

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

Your question doesn't give a clear example of what the server returns so I'm assuming you are getting a full block of html and are just rendering it on the screen. Assuming a request return something basic like :

你的问题没有给出服务器返回的明确例子，所以我假设你正在获得完整的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>

And your request looks like:

您的请求如下：

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

If you have access to the server side and can make changes:

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

Add a "inappbrowser" parameter to your request to detect if it should return inappbrowser compatible links and change the response from your server to be something like:

在您的请求中添加“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>
}

And have a generic openExternal method:

并有一个通用的openExternal方法：

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

If you can't change the server side

如果你不能改变服务器端

Parse the response and replace the links with ng-clicks:

解析响应并用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;
})

And use the same openExternal method as above.

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

I'm replacing the anchors with divs to prevent changing the app routes. That might not be necessary in every app.

我正在用div替换锚点以防止更改应用程序路由。在每个应用程序中可能没有必要。

To make this even better you should bundle it in a open-external directive so you can use it in multiple controllers and keep them cleaner.

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

#2

You can override the default link tag functionality as seen here:

您可以覆盖默认链接标记功能，如下所示：

https://blog.nraboy.com/2014/12/open-dynamic-links-using-cordova-inappbrowser/

Best,

最好，

#3

Because the HTML is already rendered when it comes to Angular, and the inAppBrowser plugin only works if called by explicit Javascript, there is nothing you can do that doesn't involve manually changing the HTML or using plain javascript.

因为在Angular中已经呈现了HTML，并且inAppBrowser插件仅在通过显式Javascript调用时才起作用，所以没有什么可以做的，不涉及手动更改HTML或使用普通的javascript。

Changing the HTML is just a Bad Idea®, especially if you try to do it by using regex matching.

更改HTML只是一个错误的想法®，特别是如果您尝试使用正则表达式匹配。

That leaves javascript:

这留下了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");
        }
      }
    });
}

#4

Install next plugin:

安装下一个插件：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Now, you can use _system, _blank or _self for destination:

现在，您可以使用_system，_blank或_self作为目标：

window.open(url, '_blank');

More info: https://www.thepolyglotdeveloper.com/2014/07/launch-external-urls-ionicframework/

更多信息：https：//www.thepolyglotdeveloper.com/2014/07/launch-external-urls-ionicframework/

#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>

In controller -

在控制器 -

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

    })

#1