1

When I add my 'web app' to my home screen on my iPhone, then open it and click a link, it opens Safari.

I've found a couple of solutions to my question but they don't seem to work:

iPhone Safari Web App opens links in new window

$('a').live('click', function (event)
{      
var href = $(this).attr("href");

if (href.indexOf(location.hostname) > -1)
{
    event.preventDefault();
    window.location = href;
}
});

http://jakeboyles.com/2011/01/16/how-to-build-an-iphone-and-ipad-web-app/

<a ontouchstart="window.location=yourlink.html' ">Your Link</a>

Both of these posts/tutorials were written before iOS5. Is there a new method? Am I doing something wrong?

Appreciate your help

Community
  • 1
  • 1
Ben Sinclair
  • 3,896
  • 7
  • 54
  • 94
  • What's your question? You've only stated what happens. – Geuis Jan 17 '12 at 04:05
  • possible duplicate of [iPhone Safari Web App opens links in new window](http://stackoverflow.com/questions/2898740/iphone-safari-web-app-opens-links-in-new-window) – Bo Persson Apr 07 '12 at 18:54

4 Answers4

1

This javascript code works for iOS 5 (it worked for me):

In the head tag:

<script type="text/javascript">
function OpenLink(theLink){
    window.location.href = theLink.href;
}
</script>

In the link that you want to be opened in the same window:

<a href="(your website here)" onclick="OpenLink(this); return false"> Link </a>

The code is based on this comment: http://mobile.tutsplus.com/tutorials/iphone/iphone-web-app-meta-tags/comment-page-1/#comment-10699

serin113
  • 49
  • 4
1

This worked fine on the iPhone 5

$(document).ready(function(){

    // Stop the default behavior of the browser, which
    // is to change the URL of the page.
    $("a").click(function(event){
        event.preventDefault();
        // Manually change the location of the page to stay in
        // "Standalone" mode and change the URL at the same time.   
        window.location = $(this).attr('href');
    });
 });

Remember to link to the newest version of jQuery.

Chris
  • 44,602
  • 16
  • 137
  • 156
Claus Reinhold
  • 41
  • 3
1

One idea is to make your home screen app an iframe, and making all anchors target it. No javascript needed.

Alternatively:

$('a').on('click touchend', function(ev){

    $(this).preventDefault();
    window.location = $(this).attr('href');

});

Never use "touchstart" for something like links. You only want to detect when the user stops touching the link. Same thing for detecting key presses, mouse clicks, etc. Its the end of the event you want to detect.

.live has been deprecated in the latest versions of jQuery, so use .on() from now on and it wraps seamlessly around extant and non-extant elements.

Geuis
  • 41,122
  • 56
  • 157
  • 219
0

Im the one that wrote the article you are referring to. I still use my javascript method and it works fine for me. The touchstart works fine for web apps as it takes a little longer for the browser to render it. If you are planning on makign a native app then don't use it, but I have used touchstart for many apps and it works fine.

Thanks Jake Boyles

Jake Boyles
  • 1