Проблема с кнопкой возврата в Safari - PullRequest
Новая
       42

Проблема с кнопкой возврата в Safari

42 голосов
/ 23 августа 2008

Я занимаюсь небольшим программированием и веб-работой для местного колледжа. Работа, которая включает в себя поддержание очень большого и разрушающего душу веб-сайта, который состоит из мешанины VBScript, javascript, Dreamweaver и множества дополнений, которые различные мошенники убедили их купить за эти годы.

Несколько дней назад мне позвонили "Сайт заблокирован для людей, использующих Safari!" Хорошо, первый шаг - загрузите Safari (v3.1.2), второй шаг - зайдите на сайт. Кажется, все работает нормально.

Короче говоря, я, наконец, выделил проблему, и она касается кнопки возврата Safari. Веб-сайт использует необычное меню 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 - нет.

После энергичного поиска в Google я обнаружил других с похожими проблемами, но не получил действительно удовлетворительных ответов. Поэтому мой вопрос заключается в том, как сделать так, чтобы мои страницы работали в Safari так же, как пользователь нажимает кнопку «Назад», как в других браузерах?

Если это глупый вопрос, пожалуйста, будьте осторожны, javascript является для меня чем-то новым.

Ответы [ 10 ]

18 голосов
/ 07 декабря 2008

Решение iframe Стефана работает, но если оно недостаточно элегантное, я считаю, что следующий JavaScript также решает его: 

window.onunload = function(){};

То есть, если в вашем меню JavaScript, вы можете решить эту проблему и с помощью JavaScript.

Идея определения обработчика события unload пришла из этой статьи в Firefox 1.5: https://developer.mozilla.org/en/Using_Firefox_1.5_caching.

9 голосов
/ 01 мая 2011

Просто поместите это в тег тела <body onunload="">

это заставит safari, chrome, FF перезагружаться при каждом нажатии кнопки "Назад"

8 голосов
/ 13 ноября 2013

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

Правильное решение для Safari (для настольных компьютеров и iOS) состоит в использовании события pageshow вместо события onload (см. https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching).

Событие pageshow будет срабатывать одновременно с ожидаемым событием onload, но оно также будет работать, когда страницы обслуживаются через кеш. В любом случае, это то, что вы хотите.

8 голосов
/ 06 сентября 2012

Вот хорошее решение для Mobile 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();
            }
        };
    }

( источник )

Я модифицировал его под свои нужды, но все нормально. (раздражает белый экран при обновлении, если вы не изменяете его).

7 голосов
/ 23 августа 2008

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>

подробнее подробнее

3 голосов
/ 21 апреля 2016 
$(window).bind("pageshow", function(event) {
  if (event.originalEvent.persisted) {
    window.location.reload() 
  }
});

Ответил совсем недавно здесь от мсах .

3 голосов
/ 23 августа 2008

Я заметил нечто очень похожее. Я думаю, это потому, что Firefox и IE, возвращаясь назад, снова получают страницу с сервера, а Safari - нет. Вы пытались добавить срок действия страницы / нет заголовка кэша? Я собирался разобраться в этом, когда обнаружил поведение, но еще не успел.

3 голосов
/ 23 августа 2008

Я понятия не имею, что является причиной проблемы, но я знаю, кто может помочь вам. Safari построен на Webkit и, если не считать Apple (которая не столь склонна к сообществу), команда Webkit может знать, в чем проблема.

Это совсем не глупый вопрос.

1 голос
/ 28 мая 2010

Я знаю, что этой ветке год, но я только что исправил идентичную проблему, связанную только с Safari, с помощью исправления кнопки Safari в ProjectSeven. Работает как шарм.

http://www.projectseven.com/extensions/info/safaribbfix/index.htm

0 голосов
/ 10 июня 2013

Была такая же проблема на iPad.

Не так красиво, но это работает :). Как это работает.

Я понял, что на iPad Safari страница не перезагружалась при нажатии кнопки «Назад». Я помещаю счетчик каждую секунду на странице и сохраняю текущую метку времени.

Когда страница загружена, счетчик и время синхронизируются. На кнопке «Назад» счетчик продолжает работу, где он остановился, и между отметкой времени и счетчиком имеется разрыв. Если зазор превышает 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();
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...