My<cod/>.net
Проблема С Кнопкой Safari Назад
Я занимаюсь небольшим программированием и веб-работой для местного общественного колледжа. Работа, которая включает в себя поддержание очень большого и душераздирающего веб-сайта, который состоит из Ходж-поджа VBScript, javascript, Dreamweaver, сгенерированного cruft и коллекции дополнений, которые различные мошенники убедили их купить на протяжении многих лет.
Несколько дней назад мне позвонили "The website is locking up for people using Safari!" хорошо, Шаг первый скачать Safari (v3.1.2), Шаг второй серфинг на сайт. Кажется, все работает нормально.
Короче говоря, я наконец-то вычленил проблему, и она относится к кнопке возврата Safari. На сайте используется меню fancy-pants javascript, которое работает в каждом браузере, который я пробовал, включая Safari, в первый раз. Но в Safari, если вы перейдете по ссылке со страницы, а затем нажмете кнопку Назад, Меню больше не работает.
Я сделал сокращенную веб-страницу, чтобы проиллюстрировать этот принцип.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Safari Back Button Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="alert('Hello');">
<a href="http://www.codinghorror.com">Coding Horror</a>
</body>
</html>
Загрузите страницу, и вы увидите окно оповещения. Затем перейдите по ссылке со страницы и нажмите кнопку Назад. В IE и Firefox вы снова видите окно оповещения, в Safari-нет.
После энергичного поиска в гугле я обнаружил других людей с похожими проблемами, но без действительно удовлетворительных ответов. Таким образом, мой вопрос заключается в том, как я могу заставить мои страницы работать так же, как в Safari после того, как пользователь нажимает кнопку назад, как и в других браузерах?
Если это глупый вопрос, пожалуйста, будьте нежны, javascript несколько ново для меня.
Решение Стефана iframe работает, но если это недостаточно элегантно, я нахожу, что следующий JavaScript также решает эту проблему:
window.onunload = function(){};
То есть, если ваше меню JavaScript, то вы можете предпочесть решить эту проблему с JavaScript тоже.
Идея определения обработчика событий выгрузки пришла из этой статьи Firefox 1.5: https://developer.mozilla.org/en/Using_Firefox_1.5_caching .
Вот хорошее решение для мобильных устройств Safari:
/*! Reloads page on every visit */
function Reload() {
try {
var headElement = document.getElementsByTagName("head")[0];
if (headElement && headElement.innerHTML)
headElement.innerHTML += " ";
} catch (e) {}
}
/*! Reloads on every visit in mobile safari */
if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
window.onpageshow = function(evt) {
if (evt.persisted) {
document.body.style.display = "none";
location.reload();
}
};
}
( источник )
Я изменил его в соответствии с моими потребностями, но так оно и есть. (раздражающий белый экран при обновлении, если вы не измените его).
Пожалуйста, не следуйте ни одному из советов, которые говорят вам игнорировать кэш. Страницы кэшируются по определенной причине - для улучшения пользовательского опыта. Методы, которые вы используете, сделают пользовательский опыт хуже, поэтому, если вы не ненавидите своих пользователей, не делайте этого.
Правильное решение для Safari (Desktop и iOS) - использовать событие pageshow вместо события onload (см. https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching для того, что это такое).
Событие pageshow будет запущено одновременно с ожидаемым событием onload , но оно также будет работать, когда страницы обслуживаются через кэш. Похоже, это то, что вам нужно в любом случае.
Ан iframe решает эту проблему:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Safari Back Button Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="alert('Hello');">
<a href="http://www.codinghorror.com">Coding Horror</a>
<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this prevents back forward cache
</iframe>
</body>
</html>
новые подробности
Я понятия не имею, что вызывает эту проблему, но я знаю, кто может быть в состоянии помочь вам. Safari построен на Webkit и за исключением Apple (которые не так сильно настроены на сообщество) команда Webkit может знать, в чем проблема.
Это совсем не глупый вопрос.
Я заметил нечто очень похожее. Я думаю, это потому, что Firefox и IE, возвращаясь назад, снова извлекают страницу с сервера, а Safari-нет. Вы пробовали добавить заголовок страницы с истекшим сроком действия / без кэша? Я собирался разобраться в этом, когда обнаружу такое поведение, но у меня еще не было времени.
Я знаю, что этому потоку уже год, но я только что исправил идентичную проблему Safari-only, используя ProjectSeven Safari backbutton fix. Работает как заклинание.
http://www.projectseven.com/extensions/info/safaribbfix/index.htm
У меня была такая же проблема на iPad.
Не то чтобы красиво, но работает :). Как это работает.
Я понял, что на iPad Safari страница не была перезагружена, когда была нажата кнопка Назад. Я ставлю счетчик каждую секунду на странице и сохраняю текущий timestamp.
При загрузке страницы происходит синхронизация счетчика и времени. На кнопке назад счетчик продолжает работать там, где он остановился, и между timestamp и счетчиком есть зазор. Если зазор больше, чем 500 мс, заставьте перезагрузить страницу.
В файле action.js
var showLoadingBoxSetIntervalVar;
var showLoadingBoxCount = 0;
var showLoadingBoxLoadedTimestamp = 0
function showLoadingBox(text) {
var showLoadingBoxSetIntervalVar=self.setInterval(function(){showLoadingBoxIpadRelaod()},1000);
showLoadingBoxCount = 0
showLoadingBoxLoadedTimestamp = new Date().getTime();
//Here load the spinner
}
function showLoadingBoxIpadRelaod()
{
//Calculate difference between now and page loaded time minus threshold 500ms
var diffTime = ( (new Date().getTime()) - showLoadingBoxLoadedTimestamp - 500)/1000;
showLoadingBoxCount = showLoadingBoxCount + 1;
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if(diffTime > showLoadingBoxCount && isiPad){
location.reload();
}
}