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.

i assume that u are testing on Android. anyway u got your answer by @asgeo1 ;) — T.Baba, Feb 21 '13 at 18:58

asgeo1 · Accepted Answer · 2013-05-05T01:06:59.337

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

That did not do the trick. The same behaviour keeps happening. The link open in the same page blocking the user from getting back in the app. — Gus Fune, Feb 08 '13 at 17:36
@gusfune - I've updated my answer. Sorry, I got confused and pasted in the wrong code snippet. The correct method to override is `shouldStartLoadWithRequest` in `MainViewController` — asgeo1, Feb 10 '13 at 01:57
The code has been moved in phonegap 2.5.0. Ive put your `if` on line 557 of CDVViewController.m and .. it works. This will override all the target, rel, config, javascript stuff that didnt work. Its definitely a hack. — commonpike, Apr 27 '13 at 21:39
It's worth noting that the window.open() approach also works in 2.5, which is supported by PhoneGap Build, if you're using that service. — Adam Tuttle, May 09 '13 at 15:24
I`m using window.open but that doesnt seem to work. I`m using PhoneGap Build with v3.5.x Any suggestion what i can do? — Reinos, Aug 22 '14 at 18:40

score 7 · Answer 2 · answered Apr 25 '13 at 03:33

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...

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();
};
```

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

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

`$(this).attr("href")` is the same as `this.href` for a link. well almost. — commonpike, Apr 27 '13 at 21:14
.. but it didnt work either (in phonegap 2.5.0, without jquery mobile, and not using phonegap build) :~/ — commonpike, Apr 27 '13 at 21:40
This didn't work for me on Android and Phonegap 2.7.0. Like @pike, I'm not using Phonegap Build. Still upvoted it because the solution is clever, follows documentation exactly, and SHOULD work. Very frustrating. — Alan Turing, May 21 '13 at 22:47

score 7 · Answer 3 · answered Apr 30 '13 at 14:00

7

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>

answered Apr 30 '13 at 14:00

user2335957

79
1
1

score -1 · Answer 4 · answered Feb 07 '13 at 01:19

-1

To open an external link in jQuery Mobile:

<a href="http://moorberry.net" data-rel="external">Like this</a>

answered Feb 07 '13 at 01:19

Michael Minter

531
4
16

2

The key to the question is that he is using Phonegap. So I don't think Phonegap is going to obey any data attributes that jQuery Mobile creates. – asgeo1 Feb 07 '13 at 02:20
I have tried this one, it gives me the same behavior that I'm trying to fix :/ – Gus Fune Feb 08 '13 at 17:33

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

4 Answers4

Linked