Jquery Mobile and External Links

4,728 views
Skip to first unread message

Sean Forman

unread,
Jan 5, 2011, 10:39:44 PM1/5/11
to phonegap
I'm using jquery mobile and phonegap to create an app. It works well
except for one issue.

I have some external links in the app that point to our company
website and when they are clicked within the app they open within the
app and not within safari, so the user is essentially stuck on the
website and can't move around.

All I want to know is how to get these links to launch safari. I'm
not even that concerned that launching safari closes the app. tia.

sean

Simon MacDonald

unread,
Jan 6, 2011, 1:21:06 PM1/6/11
to phonegap
Use the ChildBrowser plugin to launch your links and you can even come
back to your app:

https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/ChildBrowser

Simon Mac Donald
http://hi.im/simonmacdonald

> --
> You received this message because you are subscribed to the Google
> Groups "phonegap" group.
> To post to this group, send email to phon...@googlegroups.com
> To unsubscribe from this group, send email to
> phonegap+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/phonegap?hl=en?hl=en
>
> For more info on PhoneGap or to download the code go to www.phonegap.com

Sean Forman

unread,
Jan 7, 2011, 8:59:53 AM1/7/11
to phonegap
Is ChildBrowser the only way? I'm fine with the user opening the link
externally and at this point I just want what is easiest, but I'll
look at childbrowser.

sean

Simon MacDonald

unread,
Jan 7, 2011, 10:03:03 AM1/7/11
to phonegap
I'm not the iPhone guy but on Android when I click on an external link
like http://docs.phonegap.com it opens in a new browser. If you want
to open a link but not leave the app the ChildBrowser plugin is the
way to go. Hopefully someone working on iOS can help answer your
question.

Simon Mac Donald
http://hi.im/simonmacdonald

Matthew David

unread,
Jan 7, 2011, 10:21:20 AM1/7/11
to Sean Forman, phonegap
You need to add a rel attribute to explain that you are linking out of the page you are on as this clears the Ajax call in the DOM. Here's an example:

<a href="http://www.visualizetheweb.com" data-icon="back" rel="external">Link to a Web Page</a>




Lucas

unread,
Jan 17, 2011, 2:41:44 AM1/17/11
to phonegap
Hi have you found the way? I have the same problem and just want the
app opened up in ***a new safari window***, but not within the app!
What is the easiest way to do that?

James Allsup

unread,
Jan 17, 2011, 3:51:37 AM1/17/11
to phonegap
Seems like lots of us are struggling with this issue, myself included.
I've tried all the methods I can see but no luck.

Maybe some nice person could post a quick tutorial on it? I'm sure it
would be a high traffic article!

Jesse MacFadyen

unread,
Jan 17, 2011, 5:11:36 AM1/17/11
to James Allsup, phonegap
If you just want to open the link in Mobile Safari, you will need to modify your app delegate.

The AppDelegate is one of the 4 native files that you get in your phonegap project.
It is name [APPNAME]AppDelegate.m and you will need to change the shouldStartLoadWithRequest
method to be something like this:

/**

 * Start Loading Request

 * This is where most of the magic happens... We take the request(s) and process the response.

 * From here we can re direct links and other protocalls to different internal methods.

 */

- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

{

NSURL *url = [request URL];        

// add any other schemes you want to support, or perform additional 

        // tests on the url before deciding what to do -jm

if( [[url scheme] isEqualToString:@"http"] || 

    [[url scheme] isEqualToString:@"https"])

{

[[UIApplication sharedApplication] openURL:url];

return NO;

}

else 

{

return [ super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType ];

}


}


I will be blogging about this shortly, including why it was changed, how it can help you, and how to use the ChildBrowser plugin in this situation.

Cheers,
  Jesse

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en

For more info on PhoneGap or to download the code go to www.phonegap.com



--
--
Jesse MacFadyen
{
  blog:'blogs.nitobi.com/jesse',
  email:'jesse.m...@nitobi.com',
  company:
  {
    name:'Nitobi Software',
    site:'www.nitobi.com',
    phone:
    {
      office:'+1 (604) 685-9287',
      tollFree:'1-866-632-2777'
     }
  }
}

James Allsup

unread,
Jan 17, 2011, 6:16:24 AM1/17/11
to phonegap
Jesse your my new best friend!

Ctrl C, Ctrl V and now I have links going to Safari - thanks very
much...




On Jan 17, 10:11 am, Jesse MacFadyen <jesse.macfad...@nitobi.com>
wrote:
> > phonegap+u...@googlegroups.com<phonegap%2Bunsu...@googlegroups.com>
> > For more options, visit this group at
> >http://groups.google.com/group/phonegap?hl=en?hl=en
>
> > For more info on PhoneGap or to download the code go towww.phonegap.com
>
> --
> --
> Jesse MacFadyen
> {
>   blog:'blogs.nitobi.com/jesse',
>   email:'jesse.macfad...@nitobi.com <email%3A%27jesse.macfad...@nitobi.com>

pdm

unread,
Feb 9, 2011, 6:16:34 PM2/9/11
to phonegap
Hi Jesse,
Thanks for code snippet. Will these changes hold true for future
releases of phonegap as well ?
Just want to make sure that its not a temporary hack.
Appreciate your feedback.
Thanks,
Percy

On Jan 17, 2:11 am, Jesse MacFadyen <jesse.macfad...@nitobi.com>
wrote:
> If you just want to open the link in Mobile Safari, you will need to modify
> your app delegate.
>
> The AppDelegate is one of the 4 native files that you get in your phonegap
> project.
> It is name [APPNAME]AppDelegate.m and you will need to change the
> shouldStartLoadWithRequest
> method to be something like this:
>
>    /**
>
>  * Start Loading Request
>
>  * This is where most of the magic happens... We take the request(s) and
> process the response.
>
>  * From here we can re direct links and other protocalls to different
> internal methods.
>
>  */
>
> - (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(
> NSURLRequest *)request navigationType:(UIWebViewNavigationType
> )navigationType
>
> {
>
> > phonegap+u...@googlegroups.com<phonegap%2Bunsubscribe@googlegroups.c om>
> > For more options, visit this group at
> >http://groups.google.com/group/phonegap?hl=en?hl=en
>
> > For more info on PhoneGap or to download the code go towww.phonegap.com
>
> --
> --
> Jesse MacFadyen
> {
>   blog:'blogs.nitobi.com/jesse',
>   email:'jesse.macfad...@nitobi.com <email%3A%27jesse.macfad...@nitobi.com>

Jesse

unread,
Feb 9, 2011, 6:48:23 PM2/9/11
to phon...@googlegroups.com, phonegap
This code modifies your app and not the phonegap core so this is a non-breaking fix. In future releases it may not be necessary but it will continue to function as it does now.

Sent from my iPhone

Harlan

unread,
Feb 17, 2011, 10:52:04 PM2/17/11
to phonegap
I've got it almost working...but I've hit a snag.

My link opens in mobile safari, but for some reason, it opens the link
before I've clicked the link.

My link looks like this:

<li><a target="_blank" href="http://www.facebook.com/"><img
style="float:left; padding-right:8px;" width="20" height="20"
src="images/facebook_icon.png" alt="" />Facebook</a></li>

So...if I leave "target="_blank" off, it opens in the app, not in
Safari. If I change it to "rel="external"", it opens in mobile
safari, but without me clicking the link.

Am I missing something?



On Jan 17, 4:11 am, Jesse MacFadyen <jesse.macfad...@nitobi.com>
wrote:
> If you just want to open the link in Mobile Safari, you will need to modify
> your app delegate.
>
> The AppDelegate is one of the 4 native files that you get in your phonegap
> project.
> It is name [APPNAME]AppDelegate.m and you will need to change the
> shouldStartLoadWithRequest
> method to be something like this:
>
>    /**
>
>  * Start Loading Request
>
>  * This is where most of the magic happens... We take the request(s) and
> process the response.
>
>  * From here we can re direct links and other protocalls to different
> internal methods.
>
>  */
>
> - (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(
> NSURLRequest *)request navigationType:(UIWebViewNavigationType
> )navigationType
>
> {
>
> > phonegap+u...@googlegroups.com<phonegap%2Bunsu...@googlegroups.com>
> > For more options, visit this group at
> >http://groups.google.com/group/phonegap?hl=en?hl=en
>
> > For more info on PhoneGap or to download the code go towww.phonegap.com
>
> --
> --
> Jesse MacFadyen
> {
>   blog:'blogs.nitobi.com/jesse',
>   email:'jesse.macfad...@nitobi.com <email%3A%27jesse.macfad...@nitobi.com>

Richard Jones

unread,
Feb 28, 2011, 6:10:29 AM2/28/11
to phonegap
Lifesaver, thanks so much for this post! Worked as someone posted Ctl-
C, Ctl-V!
> > > phonegap+u...@googlegroups.com<phonegap%2Bunsubscribe@googlegroups.c om>

Brade

unread,
Aug 26, 2011, 3:30:42 PM8/26/11
to phon...@googlegroups.com
Rad-sauce, this worked. BUT it would be nice if it worked out-of-the-box, maybe with <a rel="browser"...> or some such.

Agentcurry

unread,
Nov 16, 2011, 2:50:02 AM11/16/11
to phon...@googlegroups.com
Worked like a charm, thans a LOT Jesse!!
Reply all
Reply to author
Forward
0 new messages