Opening links in external device browser with Cordova/jQuery-mobile

Question

I have a bunch of links in my app. I added rel='external' target='_blank' to all of them.

In the Ripple emulator, or in a regular desktop browser, this works great. But on my Android (JB 4.2.2) it opens the link in the same window. Hitting "back" takes me back to the app, but everything is screwed and the app does not work as planned (script events do not react), until physically reloaded.

How do I ensure that a link opens in the device's browser? Do I need to use a Cordova plugin?

(I'm using Cordova 2.9.0, jQuery 1.10.1, jQuery Mobile 1.3.1)

Answer 1

This has been really fickle with Cordova/PhoneGap in the last few releases, I believe because of the InAppBrowser work which might be a solution for you.

What is working for us to launch in the external browser is:

window.open("http://myurl.com", '_system');

In our case, we want to find all external links and launch them in Safari/Chrome (and keep internal links in our Angular router). This probably isn't the most elegant solution, but we are doing this right now by capturing input events on the links and taking over the behavior like so:

        $(document).on('mousedown','a', function(e) {
            e.preventDefault();
            var elem = $(this);
            var url = elem.attr('href');
            if (url.indexOf('http://') !== -1) {
                window.open(url, '_system');
            }
        });

I hope that helps you a bit.

Answer 2

I had issues with Jason Farnsworth's answer still firing the default action after the user returned to the app in iOS. So after a little tweaking of his code I arrived at the following and it behaved as expected.

$(document).on('click', 'a', function (e) {
   var elem = $(this);
   var url = elem.attr('href');
   if (url.indexOf('http://') !== -1) {
       e.preventDefault();
       window.open(url, '_system');
       return false;
   }
});

Answer 3

There're a few questions like this, but all of them try to use inappbrowser. I've used the following plugin:

com.byhook.cordova.chromelauncher

Just install it, as always, through cli:

cordova plugin add com.byhook.cordova.chromelauncher

And add the following JavaScript code:

ChromeLauncher.open(url)

This will:

1. put your app in background mode
2. open the existing instance of "google chrome for android" browser (according to the code, Google Play is gonna be opened if Chrome browser is not found, but i haven't tested this)
3. add a new tab to Chrome browser pointing to the desired URL