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

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

32 голосов
/ 21 июня 2011

У меня есть приложение HTML5 для iPad, которое работает в автономном режиме.Приложение по сути состоит из 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 являются проблемой в моей ситуации.

Ответы [ 6 ]

30 голосов
/ 12 сентября 2011

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

Это фрагмент кода 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; 
        }
    }
}
17 голосов
/ 20 октября 2011

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

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

8 голосов
/ 20 июля 2011

По моему опыту, любая внешняя ссылка, кажется, заставляет приложение выпадать из полноэкранного режима.Одним из решений является управление навигацией с использованием 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
}

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

3 голосов
/ 15 сентября 2012

Проблема с решением 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');
0 голосов
/ 19 июня 2017

Добавление этого в индексный файл поможет. 

 <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>

0 голосов
/ 06 октября 2013

Решение, с которым я согласился, - Маршрутные точки для обработки внутренних ссылок.У него есть метод open () для внешних ссылок, который работает до 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 Вы должны проверить, он включает в себя Waypoints в качестве библиотеки, и я мог бы включить всю эту обработку ссылок и исправление iOS 7, если оно того стоит.

...