4

I want to hide the URL bar from my single-page application by using JavaScript.

I tried to set bigger height of the 'body' element and then perform:

window.scrollTo(0, 0);

But it doesn't work. The URL bar is still visible. How do I solve this problem?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Aircraft5
  • 177
  • 1
  • 1
  • 13

2 Answers2

4

so far it seems it doesn't work on iOS 9, it stopped working after iOS 7.1.

As seen here:

Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch

Community
  • 1
  • 1
Luciano
  • 1,101
  • 1
  • 19
  • 30
3

For iPhone, you can make your content just one pixel higher than the viewport, that will eliminate the navbar.

Working code example: http://pastebin.com/16s8Xvbw

Caveats:

  • Only works in landscape, and when flipping from portrait to landscape - if user enters the page in landscape, he/she must flip to portrait and back to landscape.
  • If the user touches near top / bottom, navbar will re-appear.
  • Does not work on iPad at all.
Patrick Fabrizius
  • 587
  • 7
  • 22
  • This does not work for me, can you be more specific? I modified the meta viewport content height attribute via JavaScript and no change in address bar... – Arctelix Oct 21 '15 at 22:23
  • I updated the post with some details, hope it helps! – Patrick Fabrizius Oct 23 '15 at 08:38
  • This solution does not seem to do anything. Tested on ipad mini and iphone 5s. I have found that the behavior of Safari 9 varies from release to release. The hide on rotation only occurs on the iphone regardless of the the extra pixel. I am currently on 9.1(13B143). – Arctelix Nov 02 '15 at 12:57
  • It does not work on iPad at all, I should have mentioned that. Also found a small error in the pastebin (updated). If you go to http://www.quizkey.com/ios on your iPhone and flip to landscape, the navbar stays? (Works on my iPhone 5S with 9.1, 13B143) – Patrick Fabrizius Nov 03 '15 at 00:54
  • The iPhone behavior is the default behavior. When rotated to landscape the nav bar hides by default. No need to add the 1px... – Arctelix Nov 03 '15 at 17:30
  • I copied the page to quizkey.com/ios2 without the spacer. I can't get rid of the nav bar, can you? – Patrick Fabrizius Nov 03 '15 at 20:10