Evitar la carga de safari desde la caché cuando se hace clic en el botón atrás

Sí, el navegador Safari no maneja la caché de los botones de atrás/delante del mismo modo que Firefox y Chrome. Especialmente los iframes como los videos de vimeo o youtube apenas se almacenan en caché, aunque hay un nuevo iframe.src.

Encontré tres maneras de manejar esto. Elija el mejor para su caso. Soluciones probadas en Firefox 53 y Safari 10.1

1. Detectar si el usuario está utilizando el botón atrás/hacia delante, a continuación, volver a cargar toda la página o volver a cargar solo los iframes almacenados en caché mediante la sustitución de la 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. volver a cargar toda la página si la página está en caché

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

3. elimine la página del historial para que los usuarios no puedan volver a visitarla mediante los botones atrás/adelante

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

Todas esas respuestas son un poco del truco. En navegadores modernos (safari) solo en onpageshow la solución funciona,

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

Pero en dispositivos lentos a veces verá una fracción de segundo anterior vista en caché antes de que se vuelva a cargar. La forma correcta de tratar este problema es establecer correctamente el Control de caché en la respuesta del servidor a un bramido

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

Puede usar un ancla y ver el valor de la ubicación del documento href;

Comienza con http://acme.co/, agregar algo a la ubicación, como '#b';

Por lo tanto, ahora su URL es http://acme.co/#b, cuando una persona pulsa el botón atrás, vuelve a http://acme.co, y la función de verificación de intervalo ve la falta de la etiqueta hash que configuramos, borra el intervalo y carga la URL de referencia con una marca de tiempo anexa a ella.

Hay algunos efectos secundarios, pero te dejaré que los averigües ;)

<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>

Esto no está probado, pero debería funcionar con un mínimo de ajustes.

El comportamiento está relacionado con la caché de retroceso/avance de Safari. Puede obtener más información al respecto en la documentación pertinente de Apple: http://web.archive.org/web/20070612072521/http://developer.apple.com/internet/safari/faq.html#anchor5

La propia sugerencia de corrección de Apple es agregar un iframe vacío en su página:

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

(La respuesta aceptada anterior también parece válida, solo quería agregar documentación y otra solución potencial)

En primer lugar inserte un campo en su código:

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

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