3

This question has been asked a few times before, but all of the solutions date back to 2013, and I haven't got any of those answers to work with the latest versions of PhoneGap Build / Cordova.

I have a link like this which I want to open in Chrome on Android.

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

In config.xml I have the following rules:

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

I have tried using window.open(url, _system) as suggested in other answers – and included the cordova-plugin-inappbrowser plugin – however:

  1. This solution doesn't seem to work, links just open in the in-app browser
  2. I'd rather simply use target="_blank" instead of using an onClick handler for each link

I've also followed the instructions in this blog and added a handler for links with the _target='blank' attribute:

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

...but still the links open in the in-app browser.

Community
  • 1
  • 1
Benjamin Humphrey
  • 3,770
  • 2
  • 23
  • 41
  • http://stackoverflow.com/questions/15534630/phonegap-build-how-to-open-external-url-in-device-browser-on-android – Peter Scott Oct 03 '15 at 23:45
  • @PeterScott Thanks for the comment, but I don't believe it's a PhoneGap Build problem. Also, that answer is 2.5 years old so probably not relevant now. – Benjamin Humphrey Oct 03 '15 at 23:51
  • How did you install the plugin? that code should work. You can try with `cordova.InAppBrowser.open(url,"_system"); ` – jcesarmobile Oct 05 '15 at 07:16

6 Answers6

0

I use Cordova with JQM and I use this function to handle opening a link in the device browser.

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

Perhaps worth trying including the encodeURI .. what html framework/libs are you using ( ionic/JQM other? )

Peter Scott
  • 1,318
  • 12
  • 19
0

Have you tried something like this (in your JS code):

navigator.app.loadUrl(url, { openExternal: true });
Motoo
  • 90
  • 1
  • 1
  • 8
0

In my case I wanted to use Chrome or any system-default protocol handler based on user-settings within a Cordova app. On iOS, and possibly other platforms, _system does not work as-expected with protocols like googlechrome: (nothing happens with inappbrowser version 1.1.1 and cli Cordova 5.4.1 or iOS js cordova.version = 3.9.2). Based on my quick scan of the source _self targets the hybrid app webview, _system is passed off and every other target goes to another webview. I found a way to hide the iab window using hidden=yes and it just passes off the request to the OS as-is. So this effectively does a system call of the protocol. Apps will need appropriate allow origin/intent statements in config.xml like you mentioned and possibly also checking or adjusting the protocol (eg change http: to googlechrome:) when opening in this script below.

$(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();
});
jimmont
  • 2,304
  • 1
  • 27
  • 29
0

Just going back through old questions and marking them as answered. I ended up doing this:

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);
}
Benjamin Humphrey
  • 3,770
  • 2
  • 23
  • 41
0

Below code worked for me, You can try once:

"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
Darshana
  • 662
  • 1
  • 10
  • 29
-2

you can try this one

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