27

I've just upgraded to PhoneGap 1.6.1 and I can no longer get external URL's to open in Safari.

Prior to this version I had patched AppDelegate.m as follows:

- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];
    if ([[url scheme] isEqualToString:@"http"]) {
        [[UIApplication sharedApplication] openURL:url];
        return NO;
    } else {
        return [self.viewController webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
    }
}

I notice that a similar question has been asked before: How can I open an external link in Safari not the app's UIWebView?

But it looks to me like this answer no longer works on version 1.6.1.

I've also tried setting OpenAllWhitelistURLsInWebView in Cordova.plist but neither setting gives me Safari.

Thanks in advance.

1

12 Answers 12

42

The best way to open links in a new URL is actually with window.open. Just set the target as "_system":

window.open("http://stackoverflow.com", "_system");

Before I found this in the docs, I actually wrote a plugin to do the same. I'm going to leave this answer here, because this would give you much more granular control over handling of links.

With PhoneGap 2.3+, I was unable to get URLs to open in Mobile Safari in any way. Using _blank didn't work, and I tried window.open(url, '_blank'), but this now opens the URL using the InAppBrowser plugin (which pretty much sucks). I thought it was interesting that that one used a plugin though, so I decided to write a plugin to open URLs using the standard method of opening URLs in iOS apps. You can see/grab the code on this gist here: https://gist.github.com/typeoneerror/5097118.

In my example, I wired up links that have a class called "_blank" with jQuery and opened those URLs with the plugin call:

// execute the plugin called OpenUrl, signature:
// exec(successCallback, errorCallback, pluginName, pluginMethod, params)
cordova.exec(success, error, "OpenUrl", "openUrl", [url]);
7
  • 2
    This the only solution I've found to work with Cordova 2.5. Works great! To improve on it just a bit I used a little more specific selector so I could just use target="_blank" like a normal webapp: $("a[target='_blank']")
    – jonnysamps
    Commented Mar 8, 2013 at 22:54
  • 1
    @jonnysamps just figured out you can open URLs like this by using "_system" as the target with window.open, so maybe you could just switch your targets in your html to _system? I did the same as you and targeted a[target=_blank] and just passed the url on to window.open, but it may work with just _system in the HTML. Commented Mar 10, 2013 at 2:02
  • As simply as _system. Is there any advantage of using your custom plugin? Commented Apr 16, 2013 at 20:15
  • Advantage would be the ability to handle custom situations in Objective-C/Java based on the requested URL. Commented Apr 25, 2013 at 23:09
  • 2
    For reference, using Cordova 4.2.0, I've found that _system doesn't seem to work any more, either. Back to the drawing board. Commented Feb 23, 2015 at 19:59
9

I have used this in the MainViewController.m

- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];
    NSString *str = url.absoluteString;
    NSRange range = [str rangeOfString:@"http://"];
    //HACK to make url open in safari
    if (range.location != NSNotFound) {
        [[UIApplication sharedApplication] openURL:url];
        return NO;
    }
    else {
        return [ super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType ];
    }
}
3
  • this pretty much achieved the desired effect of launching the 'Safari Browser' on IOS, I hope someone could shed light on how to achieve the same on Android.
    – lock
    Commented Mar 20, 2014 at 8:34
  • This is the only solution that actually works for iOS. For Android, I'm using the InAppBrowser plugin with target of '_system', but that totally failed on iOS.
    – raider33
    Commented Mar 24, 2015 at 16:04
  • This worked like a charm, thanks a ton @john. However, we really need to set the code right in js as well.
    – Som
    Commented Aug 14, 2015 at 8:30
8

In earlier version of cordova you can load a url in browser by adding target="_blank" to your links. But now you can use inApp browser feature.

var ref = window.open(encodeURI('your url'), '_system', 'location=no');

This opens the url in browser. Tested in Android and iPhone with cordova2.7.0

2
  • I think so. But I dint check
    – Nijil Nair
    Commented Aug 15, 2013 at 10:16
  • I actually tested it. :-)
    – Norman H
    Commented Aug 15, 2013 at 16:12
5

Had the same problem after upgrading to Cordova 1.6.1.

Try adding target="_blank" to your links.

That did the trick for me.

4
  • Thank you! That's much simpler than what I'd been trying. To get to work I also needed to set OpenAllWhitelistURLsInWebView to No in Cordova.plist Commented Apr 22, 2012 at 22:01
  • 16
    This is no longer a working answer since 2.3 as _blank now opens in the InAppBrowser. Commented Mar 10, 2013 at 2:03
  • 7
    This no longer works. Use: <a href="google.com" onclick="window.open(this.href,'_system'); return false;">Google</a>
    – zSprawl
    Commented Jun 8, 2013 at 1:22
  • Didn't work for me, seems to require a plugin such as InAppBrowser
    – andrewb
    Commented Jan 25, 2016 at 4:20
4

I managed to make it work with this setup:

1: Add the following line to config.xml - PhoneGap version 3.1 and above:

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

2: Afterwards you can do like this:

<a onclick="window.open("http://www.yoururl.com/", "_system");">Link</a>
1
  • I also needed to set window.open = cordova.InAppBrowser.open;
    – andrewb
    Commented Jan 25, 2016 at 4:20
3

Trying to simplify the solution, this is what I ended up with, using PhoneGap/Cordova 2.5.0 and jQuery 1.9.1

  • OpenAllWhitelistURLsInWebView doesn't matter. Setting it to true, false or omitting it doesn't seem to have any bearing on the result.
  • The URL has a target of _system, like so: <a target="_system" href="https://rads.stackoverflow.com/amzn/click/com/B009CZICQ8" rel="nofollow noreferrer">
  • I then call:

    $("a[target='_system']").click(function(event) {
    
        event.preventDefault();
        window.open($(this).attr("href"), "_system");
    });
    
3

Do this:

<a href="http://www.google.com/" onclick="window.open(this.href,'_system'); return false;">Google</a>
3

Solved today using this settings:

  1. Android: 4.4
  2. iOS: 8.2
  3. Cordova CLI: 5.1.1
  4. In App Browser plugin: 1.2.2

Then follow these steps:

  1. Add the In App Browser plugin as above
  2. in your .html file customize this line:

<a href='http://www.arsdigitalia.it' target='_blank'>Go to my nice website</a>

  1. in your .js file use these lines:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    window.open = cordova.InAppBrowser.open;
}
window.addEventListener('load', function () {    
    $(document).on('click', 'a[target="_system"],a[target="_blank"]', function (e) {
            e.preventDefault();
            var url = this.href;
            window.open(url,"_system");                    
    });
  }
}, false);

1
  • That worked perfectly well (tested with PhoneGap Build and iOS 11). Thank you ;)
    – Guicara
    Commented Feb 2, 2018 at 9:48
2

Using Phonegap / Cordova 1.7 I've been able to open URLs in the external Browser in JavaScript just by doing this:

window.location.href = "http://www.google.com";

I also have OpenAllWhitelistURLsInWebView set to NO in Cordova.plist

1
  • The Cordova.plist setting was the critical piece for me. Thanks.
    – farhadf
    Commented Sep 24, 2012 at 23:25
2

This is the 100% guaranteed solution if you are using Phonegap (tested in iOS 6).

To open external URL in Safari, do following:

  1. Add your link in External Host (white list). e.g.: http://google.com/
  2. In Cordova.plist or Phonegap.plist, change OpenAllWhitelistURLsInWebView from Yes to No.
  3. In your application, add target="_blank" to your link. Example:

    <a href="http://google.com" target="_blank">Google.com</a>
    

Thank you.

2
  • 11
    A brave assertion: 100% guaranteed solution
    – Andrew
    Commented Nov 10, 2012 at 20:40
  • 4
    Thanks for a perfect solution. Unfortunatelly it works only under iOS. Currently (PhoneGap 2.4.0) all applications build with PhoneGap Build always opens all links in WebView on Android platform, no matter what steps you undertake. This is only a notice for PhoneGap Build and Android looking for a solution. As for now, there is none.
    – trejder
    Commented Feb 13, 2013 at 11:35
1

I think this method used to be in /Classes/[yourAppName]AppDelegate.m and now its located at /Classes/MainViewController.m Just moved it there to see if it works.

1

to open external URL in Safari Do following steps.

1).Add your link in External Host (white list).with complete url if you want to google url then add
e.g.: http://google.com/

2).In Cordova.plist or Phonegap.plist, change

OpenAllWhitelistURLsInWebView from Yes to No

for Android True to false.

3). write this code for opening the URL

window.location.href = "http://www.google.com";

Not the answer you're looking for? Browse other questions tagged or ask your own question.