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,

Answer 1

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 2

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 3

You Could just remove target attribute

Use only "rel" attribute

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

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

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