Проблема с кнопкой Safari Back Button

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

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

Короче говоря, я окончательно выделил проблему, и это связано с кнопкой возврата в Safari. На веб-сайте используется javascript-меню fancy-pants, которое работает в каждом браузере, который я пробовал, включая 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="#" onclick="location.href='http://www.codinghorror.com'; return false;">Coding Horror</a>
</body>
</html>

Загрузите страницу, и вы увидите окно предупреждения. Затем перейдите по ссылке со страницы и нажмите кнопку "Назад" . В IE и Firefox вы снова видите окно предупреждения, в Safari вы этого не делаете.

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

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

Ответ 1

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

window.onunload = function(){};

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

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

Ответ 2

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

это заставит сафари, хром, перезагрузку FF при каждом нажатии кнопки "Назад"

Ответ 3

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

(источник)

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

Ответ 4

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

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

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

Ответ 5

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>

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

$(window).bind("pageshow", function(event) {
  if (event.originalEvent.persisted) {
    window.location.reload() 
  }
});

В последнее время вы ответили на mshah.

Ответ 9

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

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

Ответ 10

Была та же проблема на 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();
    }
}