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

Answer 4

I've searched ages for the correct answer and managed to fix this another way besides the already given answers.

First of all, older versions of Cordova seem to break when you're using some methods on the newer versions of Android. Updating your Cordova to the latest version will bring some possible migration problems in your current project but is worth the shot of updating. Updated to Cordova 5.0 from 2.8, cost me around half an hour changing the code (just a few fixes required). Rebuilded, deployed and launched succesfully after. The back button made my app crash at the older versions of Cordova. The newer version made it work like a charm with the same line of code. Long story short, update cordova, change a few lines if required and rebuild your beauty.

Hope this will help you from not struggeling days like I did.

Answer 5

You Could just remove target attribute

Use only "rel" attribute

I hope it could solve your problem as i face that problem multiple times.