Phonegap 3.5.0 open link in external Safari window not working

Question

This question has been asked a million times, and I've tried all the solutions:

the "prevent default" solution, the "remove conflicting status bar hiding plugin" solution, the "variations of _blank & _system, location=yes & no" solution(s),

But none seem to work. The URL simply opens in the app itself, with no way to get back out of it.

I've even tried this code I've seen in several places:

var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
ref.addEventListener('exit', function(event) { alert(event.type); });

But still, the link just opens in the app. No "done" button that I've heard talk of. No Safari.

My config.xml:

<feature name="http://api.phonegap.com/1.0/device" />

<!-- Platform Build -->
<gap:platform name="ios" />

<!--
    If you do not want any permissions to be added to your app, add the
    following tag to your config.xml; you will still have the INTERNET
    permission on your app, which PhoneGap requires.
-->
<preference name="permissions"                value="none"/>

<!-- Customize your app and platform with the preference element. -->
<preference name="phonegap-version"           value="2.9.0" />          <!-- all: current version of PhoneGap -->
<preference name="orientation"                value="default" />        <!-- all: default means both landscape and portrait are enabled -->
<preference name="target-device"              value="universal" />      <!-- all: possible values handset, tablet, or universal -->
<preference name="fullscreen"                 value="true" />           <!-- all: hides the status bar at the top of the screen -->
<preference name="webviewbounce"              value="true" />           <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->
<preference name="prerendered-icon"           value="true" />           <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
<preference name="stay-in-webview"            value="false" />          <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->
<preference name="ios-statusbarstyle"         value="black-opaque" />   <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
<preference name="detect-data-types"          value="true" />           <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
<preference name="exit-on-suspend"            value="false" />          <!-- ios: if set to true, app will terminate when home button is pressed -->
<preference name="show-splash-screen-spinner" value="true" />           <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading -->
<preference name="auto-hide-splash-screen"    value="true" />           <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
<preference name="disable-cursor"             value="false" />          <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
<preference name="android-minSdkVersion"      value="7" />              <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
<preference name="android-installLocation"    value="auto" />           <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->

<preference name="OpenAllExternalURLsInWebView"    value="true" />


<!-- Plugins can also be added here. -->
<gap:plugin name="org.apache.cordova.inappbrowser" />

<!-- Define app icon for each platform. -->

<!-- icons -->
<icon src="icons/ios/icon-57.png" /> <!-- default -->
<icon src="icons/ios/icon-29.png" gap:platform="ios" width="29" height="29" />
<icon src="icons/ios/icon-29_at_2x.png" gap:platform="ios" width="58" height="58" />
<icon src="icons/ios/icon-40.png" gap:platform="ios" width="40" height="40" />
<icon src="icons/ios/icon-40_at_2x.png" gap:platform="ios" width="80" height="80" />
<icon src="icons/ios/icon-50.png" gap:platform="ios" width="50" height="50" />
<icon src="icons/ios/icon-50_at_2x.png" gap:platform="ios" width="100" height="100" />
<icon src="icons/ios/icon-57.png" gap:platform="ios" width="57" height="57" />
<icon src="icons/ios/icon-57_at_2x.png" gap:platform="ios" width="114" height="114" />
<icon src="icons/ios/icon-60.png" gap:platform="ios" width="60" height="60" />
<icon src="icons/ios/icon-60_at_2x.png" gap:platform="ios" width="120" height="120" />
<icon src="icons/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="icons/ios/icon-72_at_2x.png" gap:platform="ios" width="144" height="144" />
<icon src="icons/ios/icon-76.png" gap:platform="ios" width="76" height="76" />
<icon src="icons/ios/icon-76_at_2x.png" gap:platform="ios" width="152" height="152" />
<icon src="icons/ios/icon-120.png" gap:platform="ios" width="120" height="120" />
<icon src="icons/ios/icon-120_at_2x.png" gap:platform="ios" width="240" height="240" />
<icon src="icons/ios/icon-512.png" gap:platform="ios" width="512" height="512" />
<icon src="icons/ios/icon-512_at_2x.png" gap:platform="ios" width="1024" height="1024" />

<!-- launch screens -->
<gap:splash gap:platform="ios" height="480" src="splash/ios/Default-iphone.png" width="320"  />
<gap:splash gap:platform="ios" height="960" src="splash/ios/Default-iphone_x2.png" width="640" />
<gap:splash gap:platform="ios" height="1136" src="splash/ios/splash-iphone5-538h.png" width="640" />
<gap:splash gap:platform="ios" height="1024" src="splash/ios/Default-iPad-Portrait.png" width="768" />
<gap:splash gap:platform="ios" height="2008" src="splash/ios/Default-iPad-Portrait_x2.png" width="1536" />
<gap:splash gap:platform="ios" height="768" src="splash/ios/Default-iPad-Landscape.png" width="1024" />
<gap:splash gap:platform="ios" height="1496" src="splash/ios/Default-iPad-Landscape_x2.png" width="2048" />

<access origin="*"/> <!-- allow local pages -->

<!-- plugins -->

 <feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#000000" />


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

And my index.html, currently:

<a href="http://google.com" target="_system">Google</a>
[...]
<script src="scripts/vendor.js"></script>

<script src="scripts/main.js"></script>

<script src="scripts/plugins.js"></script>

<script src="phonegap.js"></script>


<script>
document.addEventListener("deviceready", onDeviceReady, false);

// function onDeviceReady() {
//     StatusBar.hide();
// }

$('a').click(function(event) {
    event.preventDefault();
    window.open($(this).attr("href"), "_system");
});
</script>

I've also tried it so that the tag looks like:

<a href="#" onclick="window.open('http://google.com', '_system', 'location=yes');">Google</a>

Same result: opens in the app.

I can see the plugins exist in myApp/plugins:

http://i.imgur.com/MKmafG4.png

I have no clue where to go from herein terms of troubleshooting this. I'm not even getting the "done" button that people say you're supposed to get with the inappbrowser, so that makes me think it isn't working properly.

Any and all help massively appreciated.

Answer 1

Ok guys, here's the answer that worked for me. The ONLY thing that worked. I've tried literally every other solution that exists. This is the one.

http://www.excellentwebworld.com/phonegap-open-a-link-in-safari-or-external-browser/

That guy's solution. It isn't very well explained, though, so I'll expand on it if you find it confusing.

I tried first simply searching for the file he's talking about, because he doesn't tell you where it's located. If you do this, you'll get a cartesian result for some reason, and modifying the file won't actually work. So here's how you get to it for real:

When you open the project in XCode, in the left sidebar file-list (Project Navigator),

1. expand "CordovaLib.xcodeproj
2. expand "Classes"
3. expand "Commands"
4. file is "CDVWebViewDelegate.m"

command+f to find "shouldstartloadwith" and you'll find the function. The old function used to begin like this:

(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
    BOOL shouldLoad = YES;

You are going to modify it to look like this:

(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{

    if([[NSString stringWithFormat:@"%@",request.URL] rangeOfString:@"file"].location== NSNotFound)
    {
        [[UIApplication sharedApplication] openURL:[request URL]];
        return NO;
    }
    BOOL shouldLoad = YES;

Then, use:

window.open('http://google.com', '_system');

Whew. Adobe really needs to update their docs.