Stop iphone safari address bar from showing when changing pages

Question

I have a mobile website, I want to stop the address bar popping down when a user clicks on a link in my site in mobile safari e.g.

On: example.org/foo

click on a link, goes to: example.org/bar

NOTE: The URL address is updated using the history pushstate API so a new page isn't being loaded, only the URL is being updated.

currently the address bar pops down as the page changes. In the mobile Twitter app, as you click around and change the page the address bar does not pop down, even though they are also updating the URL.

Any ideas how to stop the address from showing during a page change (not after the page has loaded, which is what all the other links I found refer to).

Thanks.

Paul Sham · Answer 1 · 2012-06-21T00:33:02.403

6

While this is not a solution to your problem, I can explain how mobile Twitter accomplishes this because I've had to look into it for a responsive website that I built.

Mobile Twitter does not use links at all. Instead they bind events to other elements (in this case <li> elements) which change what is displayed and are using HTML5 push state to update the URL bar.

Therefore, only solution I can see is building a separate version for mobile if possible.

P.S. Also, the easiest way to check code on mobile-specific websites is using Safari and changing the User Agent under the Develop menu.

edited Jun 21 '12 at 00:33

answered Jun 21 '12 at 00:15

Paul Sham

3,185
2
24
31

Thanks - I should have mentioned I am actually using backbone to handle pushstate, so I'm not explicitly loading a new page, but still using pushstate to update the URL causes the address bar to appear. – Mark D Jun 21 '12 at 00:36
@MarkDawson - It's not push state that is triggering the address bar. From what I can gather, any click on a link element triggers the address bar regardless of what the Javascript attached to it does. – Paul Sham Jun 21 '12 at 00:38
using
tags instead of tags is not semantic, would be great if someone knew of a solution where tags could still be used since making that switch would require massive code changes in lots of cases

tim peterson

Jan 05 '13 at 04:37

Actually you can use a tag. The problem is not the tag but the href. When your links to an address, the problem happens. The solution is to dynamically change the href by a simple hash. – adriendenat Apr 19 '13 at 16:36

score 1 · Answer 2 · edited Nov 14 '13 at 21:33

This link shows exactly what you are looking for: http://jmperezperez.com/prevent-iphone-navigation-bar-ajax-link-click/.

The only problem with the demo (code below) is that it adds a hash # to each link thereby destroying navigation. If anyone knows a way around that I would greatly appreciate it.

HTML:

<ul>
  <li>
      <a class="prevent" href="/">
           This link is ignored. However, it shows the bar
      </a>
  </li>
  <li>
      <a class="facebook" href="/blog">
           This link is ignored. It does not show the bar, 
           and modifies the hash tag.
      </a>
  </li>
</ul>

JS:

//hide bar on page load
setTimeout(function () {  window.scrollTo(0, 1);}, 500);

//attach event touchend
    document.addEventListener('touchend',
        function(e) {
        var target = e.target;
        while(target.nodeName !== 'A' && target.nodeName !== 'BODY') {
        target = target.parentNode;
    }
    if (target.nodeName === 'A' &&
        target.className === 'facebook') {
            target.href = '#!' + target.getAttribute('href');
        }
    },
        false
    );

    //attach event click
    document.addEventListener('click',
        function(e) {
        if (e.target.nodeName === 'A') {
            if (e.target.className === 'prevent') {
                e.preventDefault();
            } else if (e.target.className === 'facebook') {
                      var href = e.target.getAttribute('href');
                if (href.indexOf('#!') === 0) {
                    var newHref = href.substr(2);
                    e.target.href = newHref;
                    location.hash = newHref;
                    e.preventDefault();
                }
            }                       
        }
    },
        false
);

This is the best solution. Juts replace your links href by a hash will prevent safari from showing the address bar when you click on it. Doing it in your Javascript will prevent your navigation to broke for non-javascript users. — adriendenat, Apr 19 '13 at 16:35

score 0 · Answer 3 · edited May 23 '17 at 12:04

Seeing your comment on updating the url only not navigating to a new page, you should be able to get away with this JS piggybacking onto the link click/history update handler:

window.scrollTo(0, 1);

This would be appropriate if URL is updated effectivly representing a brand new page (as opposed to loading new pagination content into a table etc.)

The javascript approach is device-agnostic and does not rely on any further action by the end user (unlike the meta tag solution)

DevNull · Answer 4 · 2012-11-16T22:22:43.450

Try to add a hash mark (#) at the end of your url. I had the opposite problem where the address bar was sliding up after the page had loaded. This caused a problem when i tried to calculate the client height where i got a lower number than expected. The number happened to be the size of the address bar height. It took me hours to figure out that the url that i got via bitly accidentially had a # at the end. When i i removed it, the address bar stayed in place instead of sliding up. So try to add a # to the end of your url and se what happens.

In case you want to keep the address bar visible. This also mean that you should not use page anchors for in page navigation. Instead you will have to use an onclick event and scrollTo(0,height)

Stop iphone safari address bar from showing when changing pages

4 Answers4