19

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?

Magnus Smith
  • 5,895
  • 7
  • 43
  • 64

4 Answers4

8

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');
    }
},
Prinzhorn
  • 22,120
  • 7
  • 61
  • 65
  • Months later I am finally working on this issue again. Thank you for that great code snippet. I am using a slightly different 5th line: window.open(url, '_system', 'location=no') and I had to add to my config.xml – Magnus Smith Feb 19 '14 at 13:44
  • It's a function you call with a `url`. Put it wherever it fits in your codebase. In my case it's a method on a `Backbone.View`. – Prinzhorn Mar 04 '14 at 08:29
  • I have a question... Why `'location=no'` @MagnusSmith ? What is this for? Thanks! – Jabel Márquez Jun 03 '14 at 20:18
  • See http://www.w3schools.com/jsref/met_win_open.asp - it just tells the browser not to show an address bar (though it might be irrelevant in Phonegap, I admit!). – Magnus Smith Jun 04 '14 at 11:16
1

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.
pppontusw
  • 454
  • 3
  • 6
  • I always hoped I could avoid a plugin for something as simple as showing links on a web page! (N.B. The native window.open was no use.) – Magnus Smith Dec 30 '13 at 09:30
1

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 = '/#';

          });
}
Firezilla12
  • 110
  • 1
  • 8
0

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.

t0yv0
  • 4,714
  • 19
  • 36
  • I just tried, and....these all open within the app's webview in Android and iOS. Thanks for the suggestion though. – Magnus Smith Mar 25 '13 at 16:02
  • @MagnusSmith - this is a bit sad. Starts to sound like they would have to put native API into Cordova for this. Maybe someone wrote a plugin already? – t0yv0 Mar 25 '13 at 17:05