Как сохранить веб-приложение iPhone/iPad в полноэкранном режиме?

У меня есть приложение для iPad HTML5, которое работает в автономном режиме. Приложение по существу состоит из 4 файлов html и 3 файлов aspx. Мой манифест кэша настроен так, что только html файлы доступны в автономном режиме, а для файлов aspx требуется сетевое подключение. Все это отлично работает!

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

При нажатии ссылки на сервер (aspx) Mobile Safari выходит в полный режим браузера и открывает новое окно. Такое поведение неприемлемо, и я надеюсь, что мне не хватает чего-то простого здесь.

Вот метатеги, которые я использую на всех моих страницах (html + aspx):

  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Надеюсь, это обеспечит всю необходимую информацию, необходимую для понимания проблемы. Я видел другие ссылки здесь, в которых говорится, что ЛЮБАЯ страница, кроме закладки, помещенной на главной странице, заставляет некоторых людей выйти из полноэкранного режима. Это не проблема, которую я испытываю, поэтому я хотел начать новую дискуссию. Опять же, я чувствую, что если бы у меня было еще 5 html-страниц в приложении, это продолжало бы оставаться в полноэкранном режиме. Страницы aspx являются проблемой в моей ситуации.

Ответ 1

Пусть компьютер выполняет утомительную работу, для чего они созданы.

Это часть кода javascript, которую я использую, чтобы не переписывать все мои ссылки. При этом в Safari откроются только те ссылки, у которых есть явный атрибут target = "_blank". Все остальные ссылки будут оставаться в веб-приложении.

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++) {
    if(!a[i].onclick && a[i].getAttribute("target") != "_blank") {
        a[i].onclick=function() {
                window.location=this.getAttribute("href");
                return false; 
        }
    }
}

Ответ 2

Здесь есть плагин jQuery, который может помочь: https://github.com/mrmoses/jQuery.stayInWebApp

Его аналогичное решение для javascript, но имеет еще несколько функций. По умолчанию он будет прикрепляться ко всем ссылкам, но вы можете использовать его для присоединения к ссылкам с определенным классом или чем-то еще. Он также обнаруживает полноэкранный режим iOS, чтобы он не мешал другим браузерам и устройствам.

Ответ 3

По моему опыту, любая внешняя ссылка, похоже, заставляет приложение выпрыгивать из полноэкранного режима. Одним из решений является управление вашей навигацией с помощью javascript и объекта местоположения. Как показано ниже:

HTML:

<a href="javascript:navigator_Go('abc.aspx');">Go</a>

JavaScript:

function navigator_Go(url) {
    window.location.assign(url); // This technique is almost exactly the same as a full <a> page refresh, but it prevents Mobile Safari from jumping out of full-screen mode
}

Я знаю, что мне больно перерабатывать ваши ссылки таким образом, но это единственный способ найти проблему, с которой вы столкнулись.

Ответ 4

Проблема с решением KPM заключается в том, что он взаимодействует со всеми ссылками на всех страницах вашего приложения, что иногда приводит к труднодоступным ошибкам, особенно если ваше приложение интенсивно ajax. Я нашел гораздо лучшее решение здесь на github.

Я использую код ниже для удобства:

(function(document,navigator,standalone) {
            // prevents links from apps from oppening in mobile safari
            // this javascript must be the first script in your <head>
            if ((standalone in navigator) && navigator[standalone]) {
                var curnode, location=document.location, stop=/^(a|html)$/i;
                document.addEventListener('click', function(e) {
                    curnode=e.target;
                    while (!(stop).test(curnode.nodeName)) {
                        curnode=curnode.parentNode;
                    }
                    // Condidions to do this only on links to your own app
                    // if you want all links, use if('href' in curnode) instead.
                    if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) {
                        e.preventDefault();
                        location.href = curnode.href;
                    }
                },false);
            }
        })(document,window.navigator,'standalone');

Ответ 5

Решение, которое я установил, это Waypoints для обработки внутренних ссылок. Он имеет открытый() метод для внешних ссылок, который работает до iOS 6. После чего вам нужно другое исправление для iOS 7.

// Internal link handling
Waypoints
  .intercept('a')
  .ignore('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]');
  // .resume();

// External link handling...
$('a').on('click', function(e) {
  var href = $(this).attr('href');

  if ($(this).is('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]') || (href.indexOf('http') >= 0 && href.indexOf(document.location.host) === -1)) {
    e.preventDefault();
    var link = this;

    if (navigator.standalone) {
      if (/iP(hone|od|ad) OS 7/.test(navigator.userAgent)) {
        // iOS 7 external link polyfill
        e.stopPropagation();

        // Your custom dialog code for iOS 7 and external links
      }
      else {
        Waypoints.open(href);
      }
    }
    else {
      window.open(href);
    }
  }
});

Там также Swipy.js вы должны проверить, он включает в себя путевые точки в качестве библиотеки, и я мог бы включить всю эту обработку ссылок и iOS 7 исправить, если это того стоит.

Ответ 6

Добавление этого файла в индекс сделает трюк.

 <head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <script type"javascript="" text"="">
      document.addEventListener(‘DOMContentLoaded’, function(){
         var updateStatusBar = navigator.userAgent.match(/iphone|ipad|ipod/i) && navigator.appVersion.match(/OS (\d)/) && parseInt(navigator.appVersion.match(/OS (\d)/)[1], 10) >= 7 && window.navigator.standalone;
         if (updateStatusBar) {
             document.body.classList.add(‘platform-ios’);
             document.body.classList.add(‘platform-cordova’);
         }
       });
  </script>