Links don't open in external browser in JQuery Mobile with PhoneGap

Question

I'm having a problem in PhoneGap 2.3.0 with JQuery Mobile 1.2.0.

Any external link iniOS opens inside the app instead of opening Safari they open inside the app, making it impossible for user to get back to the app without rebooting it.

I have tried both rel="external" and target="_blank" to indicate it's an external link, but none with success.

I have seen that the default way that PhoneGap with JQMobile should act is the way I want. I have found lots of requests for this kind of behaviour, but not the way around.

Answer 1

I added rel="external" to my anchor links.

And then added/overrided the shouldStartLoadWithRequest method in the MainViewController class:

- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];

    // Intercept the external http requests and forward to Safari.app
    // Otherwise forward to the PhoneGap WebView
    if ([[url scheme] isEqualToString:@"http"] || [[url scheme] isEqualToString:@"https"]){
        [[UIApplication sharedApplication] openURL:url];
        return NO;
    }
    else {
        return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
    }
}

That works for me in jQuery Mobile 1.2 and Phonegap 2.2.0. It should work the same in Phonegap 2.3.0 - but I haven't tested that.

==================================================================================

UPDATE:

There may not be any need to do this in Phonegap 2.7.0 or above. Phonegap can now open links in either of the UIWebView, Safari or the InAppBrowser component. Personally I like the InAppBrowser component, as it seems to be a better user experience for a lot of use cases. If you want to open links in Safari you can now do this now using Javascript:

window.open('http://whitelisted-url.com', '_system');

or this for the InAppBrowser:

window.open('http://whitelisted-url.com', '_blank');

Have a look here for more information:

http://wiki.apache.org/cordova/InAppBrowser http://docs.phonegap.com/en/2.7.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

Answer 2

If you don't want to override the classes or dig too deep in code as suggested, try this. It worked like a charm for me. I'm using Phonegap Build and jQuery Mobile.

*Note - I tried several other ways of adding attributes directly to the anchor tags e.g. <a href="http://externalsite.com target="_blank" data-rel="external" data-ajax="false"> also tried target="_system - but none worked, so I had to use javascript (only 5 lines though).

It's not too complicated but I'll walk you through it...

1. You need to prevent the default behavior of the anchor tag. So somehow grab onto the a tags you care about. I added a class called "external" to all the anchor tags I wanted to open externally. Pretty standard stuff:

   $(document).on('click', ".external", function (e) {
       e.preventDefault();
   };
   

2. Then grab the href value from the anchor you're trying to load in safari. Again, nothing too fancy added here:

   $(document).on('click', ".external", function (e) {
       e.preventDefault();
   
       var targetURL = $(this).attr("href");
   };
   

3. This was the bit that took some digging - I guess Phonegap changed their method on this with 2.3? Anyway, open the grabbed href in a new window (here is where "_system" comes in):

   $(document).on('click', ".external", function (e) {
       e.preventDefault();
       var targetURL = $(this).attr("href");
   
       window.open(targetURL, "_system");
   });
   

That's it. That last bit of code is everything. At least that's what worked for me.

Good luck!

(To give credit where credit is due, here is what helped me most: http://www.midnightryder.com/launching-external-urls-in-phonegap-again-phonegap-2-4-x/)

Answer 3

The same solution as @KyleSimmons, but just inline, and shorter. but a simple fix. And works great for me.

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