Запретить веб-приложению iPad отображать адресную строку Safari

Question

У меня есть веб-приложение, работающее в Safari на iPad. Я запускаю приложение с домашней страницы iPad. Я хочу, чтобы приложение запускалось в полноэкранном режиме и продолжало работать в полноэкранном режиме (т.е. без отображения адресной строки Safari). Поэтому я добавил следующие метатеги на главную страницу сайта:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width">

Я запускаю приложение с домашней страницы iPad, и оно прекрасно запускается в полноэкранном режиме (без отображения адресной строки Safari), но когда я нажимаю на другую страницу сайта (с теми же мета-тегами, что и унаследованные) с той же главной страницы сайта), а затем внезапно появляется адресная строка (и остается в поле зрения). Ссылка выглядит следующим образом (я использую jQueryMobile):

<a href="/Home" data-ajax="false">Home</a>

Как сделать так, чтобы веб-приложение оставалось похожим на "нативное приложение", сохраняя адресную строку скрытой при переходе между внутренними страницами?

Answer 1

Может показаться, что Mobile Safari «изначально» не поддерживает полноэкранный режим, если вы используете внешние ссылки. Как только вы используете якорь html, он выходит из полноэкранного режима. Window.scrollTo может быть обходным решением, которое будет работать для некоторых людей, но я также хочу избежать того, как пользовательский интерфейс переворачивается при переходе в не полноэкранный режим.

Ответ заключается в использовании window.location.assign (). Это сохраняет полноэкранное приложение в «родном» полноэкранном режиме. Вам просто нужно реорганизовать ваши теги в вызовы javascript window.location.assign (url) - тогда все будет в полноэкранном режиме.

Answer 2

Добавьте jQuery, и вам не нужно изменять ссылки,

$(document).ready(function(){
    $('a').click(function(event){
        event.preventDefault();
        window.location.assign($(this).attr('href'));
    });
});

Пример ссылки:

<a href="nextpage.html">Next page without safari</a>

Answer 3

возможно это: источник

// When ready...
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});