HTML5 phonegap webapp open links in safari or other native app

Question

I have a working, accepted and approved by apple, html5 phonegap webapp but I cannot get external links to open safari or the maps apps. The problem is the same on the android version.

What happens is that when the link is clicked/tapped, I am guessing, the phonegap inappbrowser grabs the window.open event and loads the external page into the current window instance and there is no back key.

The App will now simply just show the external loaded page until it is exited and restarted.

I have read huge amounts of comments and forums about this. I have followed all the options I could find yet still the issue persists.

Could someone please tell me where I am going wrong as I am losing hair at an alarming rate...

Build is online with Phonegap 3.1 using phonegap.js and jquery. I am capturing the external link through Jquery, this all works.

Below please find the code I am using.

// capture external link click or tap?
$(document).on('click', 'a[data-rel="external"]', function(e){
e.preventDefault();
var targetURL = $(this).attr("href");
console.log('external link: '+targetURL);
var ref = window.open(targetURL, '_system', 'location=yes');
});

I have read the phonegap documents about config.xml page link to phonegap and this is what I have added to it.

<preference name="phonegap-version" value="3.1.0" />
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser" />
<plugin name="InAppBrowser" value="CDVInAppBrowser" />

I have also read about the Apple url-scheme-name and am using this in the config.xml:

<gap:url-scheme name="com.canal-st.canal-st" role="None">
<scheme>mailto</scheme>
<scheme>tel</scheme>
<scheme>http</scheme>
</gap:url-scheme>

I must have missed something. Lastly I am calling mobileinit bind is being called before jquery.mobile:

<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
   $.support.cors = true;
   $.mobile.allowCrossDomainPages = true;
   $.mobile.pushState = false;
   console.log('in mobileinit');
});
</script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>

I know there are a lot of these types of questions on here, but none of the solutions are working, or is the new version of phonegap causing a problem?

Answer 1

Your window.open should be using '_self' instead of system. Example:

$(document).on('click', 'a[data-rel="external"]', function(e){
    e.preventDefault();
    ....
    var ref = window.open(targetURL, '_self', 'location=yes');
});