Запрет загрузки сафари из кеша при нажатии кнопки «Назад»

Question

Возникла проблема с загрузкой старых видео на YouTube при сафари при нажатии кнопки «Назад».Я попытался добавить onunload = "" (упомянуто здесь Предотвращение кэша на кнопке возврата в Safari 5 ) к тегу body, но в этом случае он не работает.

Есть лиспособ запретить загрузку сафари из кеша на определенной странице?

Answer 1

Ваша проблема вызвана обратным кешем .Предполагается сохранить полное состояние страницы, когда пользователь уходит.Когда пользователь переходит назад с помощью кнопки «Назад», страница может быть загружена из кэша очень быстро.Это отличается от обычного кэша, который кэширует только HTML-код.

Когда страница загружается для bfcache, событие onload не будет запускаться.Вместо этого вы можете проверить свойство persisted события onpageshow.При начальной загрузке страницы устанавливается значение false.Когда страница загружается из bfcache, она имеет значение true.

Решением Kludgish является принудительная перезагрузка при загрузке страницы из bfcache.

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

Если вы используете jQuery, выполните:

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

Answer 2

Да, браузер Safari не обрабатывает кэш кнопок назад / вперед так же, как Firefox и Chrome.Особенно iframe, такие как видео vimeo или youtube, кешируются с трудом, хотя есть новый iframe.src.

Я нашел три способа справиться с этим.Выберите лучшее для вашего случая.Решения, протестированные на Firefox 53 и Safari 10.1

1.Определите, использует ли пользователь кнопку «назад / вперед», затем перезагрузите всю страницу или перезагрузите только кэшированные фреймы, заменив src

if (!!window.performance && window.performance.navigation.type === 2) {
            // value 2 means "The page was accessed by navigating into the history"
            console.log('Reloading');
            //window.location.reload(); // reload whole page
            $('iframe').attr('src', function (i, val) { return val; }); // reload only iframes
        }

2.перезагрузить всю страницу, если страница кэшируется

window.onpageshow = function (event) {
        if (event.persisted) {
            window.location.reload();
        }
    };

3.удалить страницу из истории, чтобы пользователи не могли снова зайти на страницу с помощью кнопок назад / вперед

$(function () {
            //replace() does not keep the originating page in the session history,
            document.location.replace("/Exercises#nocache"); // clear the last entry in the history and redirect to new url
        });

Answer 3

Все эти ответы немного взломать.В современных браузерах (сафари) только на onpageshow решении работают,

window.onpageshow = function (event) {
    if (event.persisted) {
        window.location.reload();
    }
};

, но на медленных устройствах иногда вы будете видеть предыдущее закешированное представление за доли секунды до того, как оно будет перезагружено.Правильный способ решения этой проблемы - правильно настроить Cache-Control на ответ сервера на один ниже

'Cache-Control', 'no-cache, max-age=0, must-revalidate, no-store'

Answer 4

Вы можете использовать привязку и смотреть значение местоположения документа href;

Начните с http://acme.co/, добавьте что-то к местоположению, например '#b';

Итак, теперь ваш URL-адрес http://acme.co/#b, когда человек нажимает кнопку «Назад», он возвращается к http://acme.co, и функция проверки интервала обнаруживает отсутствие установленного нами хэш-тега, очищает интервал и загружает ссылающийся URL-адрес.с добавленной к нему отметкой времени.

Есть некоторые побочные эффекты, но я оставлю вас, чтобы разобраться с ними;)

<script>
document.location.hash = "#b";
var referrer = document.referrer;

// setup an interval to watch for the removal of the hash tag
var hashcheck = setInterval(function(){
    if(document.location.hash!="#b") {

    // clear the interval
    clearInterval(hashCheck);

    var ticks = new Date().getTime();
    // load the referring page with a timestamp at the end to avoid caching
    document.location.href.replace(referrer+'?'+ticks);
    }
},100);
</script>

Это не проверено, но оно должно работатьс минимальной настройкой.

Answer 5

Прежде всего вставьте поле в ваш код:

<input id="reloadValue" type="hidden" name="reloadValue" value="" />

, затем запустите jQuery:

jQuery(document).ready(function()
{
        var d = new Date();
        d = d.getTime();
        if (jQuery('#reloadValue').val().length == 0)
        {
                jQuery('#reloadValue').val(d);
                jQuery('body').show();
        }
        else
        {
                jQuery('#reloadValue').val('');
                location.reload();
        }
});

Answer 6

Поведение относится к кешу назад / вперед Safari.Вы можете узнать об этом в соответствующей документации Apple: http://web.archive.org/web/20070612072521/http://developer.apple.com/internet/safari/faq.html#anchor5

Собственное исправление Apple предлагает добавить пустой iframe на свою страницу:

<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
    this frame prevents back forward cache
</iframe>

(предыдущий принятый ответ кажется действительнымтоже просто хотел скинуть документацию и еще одно потенциальное исправление)