Запретить загрузку safari из кэша при нажатии кнопки Назад

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

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

6 51
javascript caching safari back-button

6 ответов:

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

Да браузер Safari не обрабатывает кэш кнопок Назад/Вперед так же, как Firefox и Chrome. Специально iframes, такие как Vimeo или youtube видео кэшируются вряд ли, хотя есть новый iframe.src.

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

1. Определите, использует ли пользователь кнопку назад/вперед, затем перезагрузите всю страницу или перезагрузите только кэшированные iframes, заменив 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
        });
6

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

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

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

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

3

вы можете использовать якорь, и смотреть значение местоположения документа 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>

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

1

поведение связано с обратным / передним кэшем 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>

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

0

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

<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();
        }
});
0