CODEWITHSUNDEEP
cordova
user1228295
user1228295

Reputation: 453

PhoneGap: Opening external URL's in Safari

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.

Upvotes: 27

Views: 43484

Answers (12)

typeoneerror
typeoneerror

Reputation: 56948

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

Upvotes: 42

Zappescu
Zappescu

Reputation: 1439

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

Upvotes: 3

martinmose
martinmose

Reputation: 463

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>

Upvotes: 4

Nitin
Nitin

Reputation: 1543

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

Upvotes: 1

John Hornsby
John Hornsby

Reputation: 91

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

Upvotes: 9

Nijil Nair
Nijil Nair

Reputation: 1608

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

Upvotes: 8

zSprawl
zSprawl

Reputation: 999

Do this:

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

Upvotes: 3

ferik
ferik

Reputation: 531

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

Upvotes: 3

Nasser Al-Hadhrami
Nasser Al-Hadhrami

Reputation: 61

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.

Upvotes: 2

Ben Clayton
Ben Clayton

Reputation: 82209

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

Upvotes: 2

Yago
Yago

Reputation: 444

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.

Upvotes: 1

philkry
philkry

Reputation: 190

Had the same problem after upgrading to Cordova 1.6.1.

Try adding target="_blank" to your links.

That did the trick for me.

Upvotes: 5

Related Questions