Кроссплатформенный метод удаления адресной строки в мобильном веб-приложении - PullRequest
Новая
       42

Кроссплатформенный метод удаления адресной строки в мобильном веб-приложении

9 голосов
/ 13 марта 2012

Я работаю над мобильным веб-приложением и пытаюсь удалить адресную строку. Это достаточно просто, если естественная высота <body> не достаточно высока, чтобы прокручивать. Попробуйте, как я мог, я не могу найти надежный iphone / android, метод кросс-устройства, гарантирующий, что <body> достаточно высок, чтобы позволить адресной строке исчезнуть. Многие из методов, которые я видел, основаны на screen.height, что делает страницу ТОЛЬКО, чем она должна быть. Он должен быть ТОЛЬКО достаточно высоким, чтобы адресная строка исчезла, и не выше!

У кого-нибудь есть скрипт, который прекрасно справляется с этим? Мне все нужно, чтобы определить высоту страницы минус адресная строка для iphone и android.

Я пробовал: 

screen.height //too tall
window.innerHeight //too short
document.documentElement.clientHeight //too short
document.body.clientHeight //almost but too short

JQUERY разрешено.

Ответы [ 2 ]

5 голосов
/ 01 апреля 2012

На этом сайте также есть несколько других предложений, но этот, не несуразный, не волнующийся, доступен в github: gist и отвечает на ваш вопрос (вставлен здесь для удобства): 

function hideAddressBar()
{
  if(!window.location.hash)
  {
      if(document.height < window.outerHeight)
      {
          document.body.style.height = (window.outerHeight + 50) + 'px';
      }

      setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
  }
}

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );

Насколько я могу судить, комбинация дополнительной высоты, добавленной на страницу (которая создала проблемы для вас), и оператора scrollTo () заставляют адресную строку исчезать.

На том же сайте «простейшим» решением для сокрытия адресной строки является использование метода scrollTo (): 

window.addEventListener("load", function() { window.scrollTo(0, 1); });

Это будет скрывать адресную строку до тех пор, пока пользователь не прокрутит.

Этот сайт помещает тот же метод в функцию тайм-аута (обоснование не объясняется, но утверждает, что код не работает без него): 

// When ready...
window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
    window.scrollTo(0, 1);
  }, 0);
});
1 голос
/ 01 апреля 2012

Я думаю, как это работает, адресная строка скрыта, когда страница не помещается.Таким образом, вы хотите, чтобы страница точно соответствовала высоте окна, включая адресную строку, то есть window.outerHeight, нет?

...