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.