Utilizing Cordova and jQuery-mobile to launch links in a separate device browser

Question

Utilizing Cordova and jQuery-mobile to launch links in a separate device browser

My app has numerous links, all of which I have added rel='external' target='_blank' to. While this works perfectly in the Ripple emulator and regular desktop browsers, it doesn't function correctly on my Android device running JB 4.2.2. The link opens in the same window, and when I hit "back," it messes up the app's functionality until I physically reload it.

How can I make sure that a link opens in the device's browser instead? Do I need to utilize a Cordova plugin for this?

(The versions I am currently using are Cordova 2.9.0, jQuery 1.10.1, jQuery Mobile 1.3.1)

javascript jquery-mobile cordova

Answer 1

Answer №1

Recent updates with Cordova/PhoneGap have been quite inconsistent. It seems that the changes made for the InAppBrowser functionality may offer a solution.

One method we have found effective for launching content in an external browser is:

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

In our particular case, we needed to identify external links and open them in Safari/Chrome while keeping internal links within our Angular router. While our solution may not be the most elegant, we achieve this by intercepting input events on links and modifying the behavior as shown below:

        $(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');
            }
        });

Hopefully this information proves helpful to you.

Answer 2

Recent updates with Cordova/PhoneGap have been quite inconsistent. It seems that the changes made for the InAppBrowser functionality may offer a solution.

One method we have found effective for launching content in an external browser is:

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

In our particular case, we needed to identify external links and open them in Safari/Chrome while keeping internal links within our Angular router. While our solution may not be the most elegant, we achieve this by intercepting input events on links and modifying the behavior as shown below:

        $(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');
            }
        });

Hopefully this information proves helpful to you.

Answer 3

Answer №2

After encountering a persistent issue with Jason Farnsworth's solution still triggering the default action upon user's return to the iOS app, I decided to make a few adjustments to the code. The revised code provided below worked as intended.

$(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 4

After encountering a persistent issue with Jason Farnsworth's solution still triggering the default action upon user's return to the iOS app, I decided to make a few adjustments to the code. The revised code provided below worked as intended.

$(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 5

Answer №3

There are numerous queries similar to this, all attempting to utilize the inappbrowser. To address this, I opted to utilize the following plugin:

com.byhook.cordova.chromelauncher

To integrate it, simply execute the following command in the command line:

cordova plugin add com.byhook.cordova.chromelauncher

Additionally, include the subsequent snippet of JavaScript code:

ChromeLauncher.open(url)

By implementing this, the following outcomes are achieved:

Puts your application in background mode
Launches the pre-existing instance of the "Google Chrome for Android" browser (in the absence of Chrome, it will redirect to Google Play - although this has not been personally verified)
Creates a new tab in Chrome that navigates to the specified URL

Answer 6

There are numerous queries similar to this, all attempting to utilize the inappbrowser. To address this, I opted to utilize the following plugin:

com.byhook.cordova.chromelauncher

To integrate it, simply execute the following command in the command line:

cordova plugin add com.byhook.cordova.chromelauncher

Additionally, include the subsequent snippet of JavaScript code:

ChromeLauncher.open(url)

By implementing this, the following outcomes are achieved:

Puts your application in background mode
Launches the pre-existing instance of the "Google Chrome for Android" browser (in the absence of Chrome, it will redirect to Google Play - although this has not been personally verified)
Creates a new tab in Chrome that navigates to the specified URL

Answer 7

Answer №4

After tirelessly searching for the solution, I managed to find a workaround different from the ones already provided.

It seems that using older versions of Cordova with newer versions of Android can cause issues. Updating Cordova to the latest version may introduce some migration problems in your current project, but it's definitely worth a try. I upgraded from Cordova 2.8 to 5.0, which only required a few code tweaks and took around half an hour. After rebuilding, deploying, and launching successfully, I noticed that the back button, which had caused my app to crash on older Cordova versions, now functioned perfectly with the same line of code. In short, updating Cordova, making necessary code adjustments, and rebuilding your project can resolve many issues.

I hope this information prevents others from experiencing the same struggles I faced.

Answer 8

After tirelessly searching for the solution, I managed to find a workaround different from the ones already provided.

It seems that using older versions of Cordova with newer versions of Android can cause issues. Updating Cordova to the latest version may introduce some migration problems in your current project, but it's definitely worth a try. I upgraded from Cordova 2.8 to 5.0, which only required a few code tweaks and took around half an hour. After rebuilding, deploying, and launching successfully, I noticed that the back button, which had caused my app to crash on older Cordova versions, now functioned perfectly with the same line of code. In short, updating Cordova, making necessary code adjustments, and rebuilding your project can resolve many issues.

I hope this information prevents others from experiencing the same struggles I faced.

Answer 9

Answer №5

One simple solution is to eliminate the "target" attribute entirely.

Instead, rely solely on the "rel" attribute for your needs.

I have encountered this same issue multiple times, so hopefully this solution will work for you as well.

Answer 10

One simple solution is to eliminate the "target" attribute entirely.

Instead, rely solely on the "rel" attribute for your needs.

I have encountered this same issue multiple times, so hopefully this solution will work for you as well.

Utilizing Cordova and jQuery-mobile to launch links in a separate device browser

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

React re-rendering only when arrays are filtered, and not when new elements are added

Changing the color of an Angular <div> element with scripting

How can I convert duplicate code into a function in JavaScript?

Tips for showcasing a drop-down menu using Jquery

Determining the width of a window using JavaScript

I'm having trouble getting Stripe checkout to function properly with Angular 1.x

Is there a method to retrieve a value from a node.js server when a div is clicked?

Extracting data from a JavaScript React webpage with Python Selenium, targeting an element that disappears shortly after loading

Adjust the variable value if the "for" loop encounters an error

Are the functionalities of twilio-common.js on github equivalent to those of twilio-client.js on their CDN?

What is the best way to retrieve the value from a textarea and verify if it is blank or not?

What is the best method to securely install a private Git repository using Yarn, utilizing access tokens without the need to hardcode them

Generating fresh objects to establish a Many-to-Many connection with Sequelize

Spinning an object smoothly in the opposite direction of the OrbitControls camera's y rotation in three.js

I'm currently working on incorporating a rating system into my Vue.js project, but I am struggling to successfully pass the rating values

Using the for-each loop in Express.js with Node

Optimal method for parsing URLs using ES6

What is the purpose behind enclosing a function expression in parentheses in JavaScript (apart from creating an IIFE)?

Apply a Fade In transition to the ul li elements following a JavaScript toggle

Increasing space at the top with heading