Launch mobile safari from full screen web app on iPhone

Question

I've Googled this question in a few variations and can only find answers in the context of using PhoneGap or jQuery mobile. However, I'm using neither... just plain old html and javascript.

I'm trying to launch mobile safari from a full screen web app using window.open()... not an inline anchor. No matter what I do, the url opens in the web app, not in Safari. Does anyone have any suggestions?

Thanks.

Answer 1

It took me a while but I was able to piece this solution together. In an iOS standalone web app mode, it creates a link element using jQuery, adds it to the body, simulates a click on it, and then removes the link. You can accomplish the same thing without jQuery, it just takes more code using the naive DOM methods.

if (window.navigator.standalone) {
  var $a = $('<a href="' + url + '" target="_blank"/>');
  $("body").append($a);

  var a = $a.get(0);

  var mouseEvent = a.ownerDocument.createEvent('MouseEvents');
  mouseEvent.initMouseEvent('click');
  a.dispatchEvent(mouseEvent);

  $a.remove();
}
else {
  window.open(url, '_blank');
}

Answer 2

As of iOS 4.3, the only way I know of is to convert the <div> into an <a target="_blank"> and let the default browser to handler it. It launches the new page into an external Safari.

Answer 3

In PhoneGap, all URLs load into WebView by default. Setting targets or being fancy with JS will not break your external links out of that WebView. In order to load external URLs into Safari, rather than the PhoneGap app itself, you need to modify the way URLs are handled in the application delegate.

Open up your PhoneGap app code and locate [projectname]AppDelegate.m ... typically found under [projectname]/Classes folder.

Modify shouldStartLoadWithRequest however you like. Here is a sample implementation that will evaluate requests and handle HTTP or HTTPS schemes to load in Safari (borrowed from http://solutions.michaelbrooks.ca/2011/02/15/open-external-links-in-safariapp/):

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

Answer 4

Have you tried using window.openNative()?

Answer 5

can't you use a normal A HREF Tag? this normally opens Safari from within a webapp.

Answer 6

If you cannot create a standard HTML link , but you must open Safari programmatically (with Javascript code only), here is the code:

var a = document.createElement("a");
a.setAttribute('href', facebook);
a.setAttribute('target', '_blank');
a.click();