Open external links in Phonegap Build App (iOS/Android)

3
votes

I'm using Phonegap Build to deploy mi Apps, I'm using the Cordova 3.3.0 version.

I want open external links in the native browser (Android/iOS). I'm trying to use the InAppBrowser plugin of Cordova, but it doesn't work for me. Open the links but inside the App without back button... :/

I've seen answers like Include phonegap.js file (but when deploys with Phonegap Build you don't have to include it, PGB do it for you), or using or using a function to open links + InAppBrowser Plugin, or even who say that this is fixed deploying locally, but I can't deploy locally because my Mac doesn't support the new versions of XCode and iOS SDK's.

This is the relevant code of my config.xml:

<preference name="phonegap-version" value="3.3.0" />
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.3.3" />
<feature name="InAppBrowser">
    <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
    <param name="ios-package" value="CDVInAppBrowser" />
</feature>
<access origin="*" />

This is the JS function I've been trying:

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

And the links I tried, from the most basic to the use of functions:

<a href="http://www.example.com" target="_blank">Link</a>
<a href="#" onClick="abrirURL('http://www.example.com');">Link</a>
<a href="#" onClick="window.open('http://www.example.com', '_blank');">
<a href="#" onClick="window.open('http://www.example.com', '_system');">

Nothing of this works for me, somebody help me please. Thanks!

2
cordovaphonegap-pluginsphonegap-buildinappbrowser

2 Answers

1
votes

The solution for my problem was include phonegap.js file to my <head> in all the pages where I will use the InAppBrowser: <script src="phonegap.js"></script>

I'm gonna explain a little, why this solution in first time doesn't seem logic to me (and maybe you too), but then I tried and it works.

This is what Phonegap in his plugin documentation section says:

"If a plugin utilizes the js-module element to direct cordova to load the plugin javascripts, then no <script> references will be necessary to load a plugin. This is the case for the core cordova plugins"

InAppBrowser is a core cordova plugin. But for some strange reason don't work until you include the phonegap.js file (at least in 0.3.3 version).

NOTE: I found a bug. Some people says that you have to include 3 files: phonegap.js, cordova.js and cordova_plugins.js. But when I include this 3 files my app works fine in iOS 7, but in iOS 6 ignore the use of the plugin (Using: Cordova 3.3.0 + Phonegap Build + InAppBrowser 0.3.3).

0
votes

I needed to do two things to get this to work in 3.7.0.

config.xml

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

In HTML a tags

<a onclick="window.open(this.href,'_system','location=no');return false;" href="http://stackoverflow.com">

I actually wrote a function to handle this so my HTML would be normal

$(document).on('click','a',function(e) {
    if ($(this).attr('target') === '_blank') {
        window.open($(this).attr('href'),'_system','location=no');
        e.preventDefault();
    }
});