CODEWITHSUNDEEP
cordova
Magnus Smith
Magnus Smith

Reputation: 5963

Consistent way to open links from Phonegap app in both Android and iOS?

I have a mobile app made with Phonegap which displays news articles which may contain links. I want those links to open in a proper browser, seperate from the app. I cannot find a single way to do this which gives the same results in Android and iOS after I upgraded from Phonegap version to 2.0.0 to 2.1.0 (since you cannot rotate the screen in iOS prior to 2.1).

<a href="http://blah">
Always opens within the app, no browser toolbars, and no way to get back to the app without terminating it. iOS obeys <access origin="http://blah" /> in config.xml but Android doesn't. Neither seem to care about the browserOnly="true" attribute.

<a href="http://blah" target="_blank">
iPhone opens this within Safari browser if <access> allows it (or is omitted entirely), but Android opens it within the app .

<preference name="stay-in-webview" value="false" />
Adding this to config.xml makes no difference at all.

<a href="#" onClick="navigator.app.loadUrl('http://blah',{openExternal:true});return false;">
Only supported in Android, where it opens the link in Chrome browser. Errors in iOS.

<a href="#" onClick="window.open('http://blah','_blank','location=yes');return false;">
In Phonegap version 2.3.0 this will stay within the app but shows a cheap-looking browser toolbar at top/bottom with a button that allows you to return to the app. This is consistent...but not what I want. (In version 2.1.0 this causes Android to open within the app and iOS to open in proper browser.)

I am using Phonegap Build so this solution will not work.
The official documentation refers to this blog post which was written with reference to version 1.5.0 and my 2.1.0 to 2.3.0 findings do not match with their table.
I don't really want to add a plugin for something this simple.

Is there a single piece of code which will cause a link to open in the device's own browser, outside of the app's webview, regardless of OS?

Upvotes: 19

Views: 11278

Answers (4)

Firezilla12
Firezilla12

Reputation: 110

you need to install the inAppBrowser plugin and run this function onDeviceReady function with the help of jQuerys .on('click') method like so

function hijack_externalLinks(){

    $(document).on('click', "a[href^='http://']", function (e) {

         window.open( this.href , '_system', 'location=yes' );
         this.href = '/#';

          });
}

Upvotes: 1

pppontusw
pppontusw

Reputation: 454

I just wanted to point out, I have not actually managed to do this myself but are you using the inAppBrowser plugin and do you have that specified in your config.xml with the necessary permissions?

According to this http://docs.phonegap.com/en/3.3.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser you should use:

var ref = window.open(url, target, options);

target: The target in which to load the URL, an optional parameter that defaults to _self. (String)

_self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
_blank: Opens in the InAppBrowser.
_system: Opens in the system's web browser.

Upvotes: 1

Prinzhorn
Prinzhorn

Reputation: 22508

Maybe it's not too late. Anyway, this is from our codebase and it works on both platforms.

openURL: function(url) {
    if(device.platform === 'Android') {
        navigator.app.loadUrl(url, {openExternal:true});
    } else {
        window.open(url, '_system');
    }
},

Upvotes: 8

t0yv0
t0yv0

Reputation: 4724

PhoneGap 2.5.0 docs say it supports "_blank", "_self", "_system" targets - do any of these do what you need? I am guessing here as I have not yet set up a proper testing environment, cannot yet try this out.

Upvotes: 0

Related Questions