Как сохранить веб-приложение 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>
