PhoneGap: Opening external URL's in Safari

Question

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.

Check my 2015 answer here to open `_self` in WebView, and `_blank` in external browser: http://stackoverflow.com/questions/32208609/cordova-why-would-inappbrowser-plugin-be-required-to-open-links-in-system-brows/32227524 — Sebastien Lorber, Aug 26 '15 at 13:44

typeoneerror · Answer 1 · 2017-08-08T23:58:58.370

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]);

edited Aug 08 '17 at 23:58

answered Mar 06 '13 at 06:25

typeoneerror

55,990
32
132
223

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 Mar 08 '13 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. – typeoneerror Mar 10 '13 at 02:02
As simply as _system. Is there any advantage of using your custom plugin? – Mars Robertson Apr 16 '13 at 20:15
Advantage would be the ability to handle custom situations in Objective-C/Java based on the requested URL. – typeoneerror Apr 25 '13 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. – Stuart Watt Feb 23 '15 at 19:59
Stuart, did you figure out a solution? – Nitzan Wilnai Jul 20 '15 at 20:03
Didn't work for me, seems to require a plugin such as InAppBrowser – andrewb Jan 25 '16 at 04:19

score 9 · Answer 2 · answered Oct 22 '13 at 11:15

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 ];
    }
}

answered Oct 22 '13 at 11:15

John Hornsby

91
1
1

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 Mar 20 '14 at 08: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 Mar 24 '15 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 Aug 14 '15 at 08:30

score 8 · Answer 3 · edited Jul 25 '13 at 05:46

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

edited Jul 25 '13 at 05:46

Mumthezir VP

6,251
6
28
57

answered Jul 25 '13 at 04:48

Nijil Nair

1,608
1
11
14

I think so. But I dint check – Nijil Nair Aug 15 '13 at 10:16
I actually tested it. :-) – Norman H Aug 15 '13 at 16:12

score 5 · Accepted Answer · answered Apr 22 '12 at 16:13

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.

answered Apr 22 '12 at 16:13

philkry

180
5

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 – user1228295 Apr 22 '12 at 22:01
16

This is no longer a working answer since 2.3 as _blank now opens in the InAppBrowser. – typeoneerror Mar 10 '13 at 02:03
7

This no longer works. Use: Google – zSprawl Jun 08 '13 at 01:22
Didn't work for me, seems to require a plugin such as InAppBrowser – andrewb Jan 25 '16 at 04:20

score 4 · Answer 5 · answered Apr 16 '14 at 12:02

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>

answered Apr 16 '14 at 12:02

martinmose

443
8
12

I also needed to set window.open = cordova.InAppBrowser.open; – andrewb Jan 25 '16 at 04:20

score 3 · Answer 6 · answered Mar 21 '13 at 04:01

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");
});

score 3 · Answer 7 · answered Jun 08 '13 at 01:21

3

Do this:

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

answered Jun 08 '13 at 01:21

zSprawl

969
7
11

score 3 · Answer 8 · answered Feb 04 '16 at 11:48

Solved today using this settings:

Android: 4.4
iOS: 8.2
Cordova CLI: 5.1.1
In App Browser plugin: 1.2.2

Then follow these steps:

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

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

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);

That worked perfectly well (tested with PhoneGap Build and iOS 11). Thank you ;) — Guicara, Feb 02 '18 at 09:48

score 2 · Answer 9 · answered Jun 21 '12 at 15:44

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

answered Jun 21 '12 at 15:44

Ben Clayton

80,996
26
120
129

The Cordova.plist setting was the critical piece for me. Thanks. – farhadf Sep 24 '12 at 23:25

score 2 · Answer 10 · edited Nov 10 '12 at 20:37

2

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

To open external URL in Safari, do following:

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

Thank you.

edited Nov 10 '12 at 20:37

Jay

4,627
1
21
30

answered Nov 10 '12 at 20:12

Nasser Al-Hadhrami

61
1
1

11

A brave assertion: 100% guaranteed solution – Andrew Nov 10 '12 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 Feb 13 '13 at 11:35

score 1 · Answer 11 · answered May 02 '12 at 22:13

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.

answered May 02 '12 at 22:13

Yago

374
2
12

score 1 · Answer 12 · answered Mar 27 '14 at 05:04

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";

PhoneGap: Opening external URL's in Safari

12 Answers12

Linked