使用 Cordova，如何在 Chrome 而不是应用内浏览器中打开外部 URL？

Question

这个问题已经被问了几个时代之前，但所有的解决方案，可以追溯到2013年，而我还没有得到任何这些问题的答案将工作与PhoneGap的生成/科尔多瓦的最新版本。

我有一个这样的链接，我想在 Android 上的 Chrome 中打开它。

<a href="https://twitter.com/humphreybc" target="_blank">Twitter</a>

在config.xml我有以下规则：

<allow-navigation href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<access origin="*" />

我曾尝试按照其他答案中的建议使用window.open(url, _system) – 并包含了cordova-plugin-inappbrowser插件 – 但是：

1. 此解决方案似乎不起作用，链接只是在应用程序内浏览器中打开
2. 我宁愿简单地使用 target="_blank" 而不是为每个链接使用 onClick 处理程序

我还按照此博客中的说明为具有_target='blank'属性的链接添加了一个处理程序：

$(document).on('click', 'a[target="_blank"]', function (e) {
  e.preventDefault();
  var url = this.href;
  window.open(url,"_system");                    
});

...但链接仍然在应用程序内浏览器中打开。

Answer 1

我将 Cordova 与 JQM 一起使用，并使用此函数来处理在设备浏览器中打开链接。

function open_url( link ) {
   var ref = window.open(encodeURI( link), '_system',        'transitionstyle=fliphorizontal');
}

也许值得尝试包括 encodeURI .. 你在使用什么 html 框架/库（ionic/JQM 其他？）

Answer 2

您是否尝试过这样的事情（在您的 JS 代码中）：

navigator.app.loadUrl(url, { openExternal: true });

Answer 3

就我而言，我想根据 Cordova 应用程序中的用户设置使用 Chrome 或任何系统默认协议处理程序。 在 iOS 和可能的其他平台上， _system与googlechrome:协议无法按预期工作googlechrome: （inappbrowser 版本 1.1.1 和 cli Cordova 5.4.1 或 iOS jscordova.version = 3.9.2 没有任何反应）。 根据我对源_self 快速扫描，目标是混合应用程序 webview， _system被传递，每个其他目标都转到另一个 webview。 我找到了一种使用hidden=yes隐藏 iab 窗口的方法，它只是将请求按原样传递给操作系统。 因此，这有效地执行了协议的系统调用。 像您提到的那样，应用程序需要在 config.xml 中使用适当的 allow origin/intent 语句，并且可能还需要检查或调整协议（例如，在下面的脚本中打开时将http:更改为googlechrome: ）。

$(document).on('click', (function(base){
/*
this single-page hybrid app uses fragment (ie #/go/here/now ) to navigate
so links will always have the same base url eg 
file:///path/to/app.html
http://localhost/path/to/app.html
*/
var open;
base = base.location.origin + base.location.pathname;
return function(e){
    var a, href;
    if(!(a=e.target.closest('a')) ||  (href=a.href).indexOf(base) === 0 || !href) return;
    e.preventDefault();
    // assuming cordova is available with the plugin https://github.com/apache/cordova-plugin-inappbrowser
    // use with any protocol eg: 'googlechrome://www.google.com/' tel:+18005551212 http://stackoverflow.com
    window._external_app_window = (open || (open = ((window.cordova||{}).InAppBrowser||window).open))(
        href, '_external_app_window', 'hidden=yes'
    );
};
})(this))
.on('resume', function(){
    if(window._external_app_window)    window._external_app_window.close();
});

Answer 4

只需返回旧问题并将其标记为已回答。 我最终这样做了：

function onDeviceReady() {
  return $(document).on('click', 'a[target="_blank"]', function(e) {
    e.preventDefault();
    return window.open(this.href, '_system');
  });
};

if (!!window.cordova) {
  document.addEventListener('deviceready', onDeviceReady, false);
}

Answer 5

下面的代码对我有用，您可以尝试一次：

"googlechrome://navigate?url=" + url

i.e. window.open("googlechrome://navigate?url=" + url,"_system"); // here you can try with _system or _blank as per your requirement

Answer 6

你可以试试这个

 <a class="item" href="#" onclick="window.open('https://twitter.com/humphreybc', '_system', 'location=yes'); return false;">Open Browser</a>