PhoneGap Build - Open link in external browser

[Trev Burley]

Hi All,

Having some issues using the online Phonegap Build service and the deadline is approaching fast for this app to be delivered. When a link to a website is clicked within the app the website opens within the webview. I need this to open in the systems default external browser (Chrome / Safari etc). On android this webview behaviour doesn't matter as much as we have back buttons but iOS users have to close the app to get back to the main part of the app so it is a critical usability bug for my client.

Things I have tried:

Within the href tag:

target="_blank"

target="_system"

OnClick:

window.open( [link] , '_blank'); 
window.open( [link] , '_system'); 

Config.xml

<preference name="stay-in-webview" value="false" />

<access origin="mysite.com" browserOnly="true" />

Really struggling for ideas now, help would be much appreciated!

Thanks - Trev

[jcesarmobile]

install inAppBrowser plugin

[Trev Burley]

Thanks jcesarmobile, I have been asked to avoid using this method, the client specifically asked to open in the system's default browser - like if you were to create an intent in native Android... If there is no way then I will have to go with this but it means the users cannot bookmark web pages etc...

[jcesarmobile]

I don't say you have to use the InAppBrowser plugin, but last time I checked, the logic to open the external links was there, so if you don't install the plugin the _system won't work.

Just install the plugin and use _system option, it will open the link in system's default browser.

[Trev Burley]

Thanks jcesarmobile, I didn't understand that - will give it a go!

[Trev Burley]

Still having no luck, my config.xml file looks like this:

<preference name="stay-in-webview" value="false" />

<gap:platform name="android" />

<gap:platform name="ios" />

<gap:plugin name="org.apache.cordova.inappbrowser" version="0.3.3" />

<feature name="InAppBrowser">

    <param name="android-package" value="org.apache.cordova.InAppBrowser" />

    <param name="ios-package" value="CDVInAppBrowser" />

</feature>

<access origin="mysite.com" browserOnly="true" />

Phonegap build says that it is successfully adding the plugin. My link looks like this:

<a href="http://www.mysite.com" target="_system">Our Website</a>

I have also tried:

$('body').on('click', '.externalBrowserLink', function(e) {

      e.preventDefault;

      var ref = window.open($(this).attr('href'), '_system');

});

Any further ideas?

[Steve Husting]

<p class="button"><a href="#" onclick="window.open('http://iphonedevlog.wordpress.com/phonegapcordova-crib-sheet/','_system');">URL opens in system web browser (must shut down browser then re-open app)</a>
 </p>

[Trev Burley]

Thanks, I was doing that and I think I am getting the results I should be getting but I am after a different thing altogether. The client wants it to open in the user's preferred external browser separate from the app such as Chrome so they have access to their bookmarks and don't have to close the app to get out of the browser. This is a trivial task for native Android programming?

[jcesarmobile]

what are you getting?

[Trev Burley]

@jcesarmobile - I am getting the following when clicking on a link (Android shown, but iPad does the same):

https://drive.google.com/file/d/0B8DScrqV2lF2TEtQNGMtY1pRTEU/edit?usp=sharing

As you can see, it doesn't open an external app to view the URL (see next link for recent apps view):

https://drive.google.com/file/d/0B8DScrqV2lF2eW1fc2IybGVyS1U/edit?usp=sharing

What I need to happen is this:

https://drive.google.com/file/d/0B8DScrqV2lF2THVUc2VySkZCWDQ/edit?usp=sharing

Which as you can see opens a separate application:

https://drive.google.com/file/d/0B8DScrqV2lF2ZEgzbW1YMDJZaFE/edit?usp=sharing

Also on my to do list is PDF downloads as they also open inside the app instead of using the default system browser's behaviour but that should resolve itself if I can get the external browser to actually open.

Cheers - Trev

[jcesarmobile]

then the plugin ins't working as expected, the expected behaviour using _system is your expected behaviour

first of all try with this, just to see if inAppBrowser is correctly installed

<a href="#" onclick="window.open('http://www.google.com/','_blank');">Open google in an InAppBrowser window</a>

you can try try removing this from the config.xml too, I don't think you need that if you are using phonegap build

<feature name="InAppBrowser">

    <param name="android-package" value="org.apache.cordova.InAppBrowser" />

    <param name="ios-package" value="CDVInAppBrowser" />

</feature>

and maybe the

<preference name="stay-in-webview" value="false" />

[Trev Burley]

@jcesarmobile - got the in app browser working, when I first tried to do it using your code I had nothing happening whatsoever. Turns out that Hydration (what phonegap build uses to update devices for development) doesn't add in new plugins, that requires a complete reinstall - doing so added the in app browser plugin and things started working - I haven't tried _system yet though as I am having internet problems so things are going rather slow!

Thanks for your help - much appreciated!