javascript - Evite la carga de Safari desde la memoria caché cuando se hace clic en el botón Atrás

caching back-button

Question

Tengo un problema con safari cargando videos antiguos de youtube cuando se hace clic en el botón Atrás. He intentado agregar onunload = "" (mencionado aquí Prevención del caché en el botón de retroceso en Safari 5 ) a la etiqueta de cuerpo, pero no funciona en este caso.

¿Hay alguna forma de evitar que Safari se cargue desde el caché en una página determinada?

Answer 1

El comportamiento está relacionado con el caché Back / Forward de Safari. Puede obtener 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 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)

Answer 2

Primero de todo inserte el campo en su código:

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

luego ejecuta 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 3

Puede usar un anclaje y observar el valor de la ubicación del documento href;

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

Entonces, ahora su URL es http://acme.co/#b , cuando una persona presiona el botón Atrás, regresa a http://acme.co , y la función de verificación de intervalo ve la falta de la etiqueta hash que establecer, borra el intervalo y carga la URL de referencia con un sello de tiempo adjunto.

Hay algunos efectos secundarios, pero los dejo para descubrirlos;)

<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 se ha probado, pero debería funcionar con ajustes mínimos.

Answer 4

Sí, el navegador Safari no maneja el caché del botón atrás / adelante de la misma manera que Firefox y Chrome. Especialmente iframes como vimeo o youtube videos son almacenados en caché apenas aunque haya un nuevo iframe.src.

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

1. Detecte si el usuario está usando el botón Atrás / Adelante, luego vuelva a cargar toda la página o vuelva a cargar solo los iframes en caché reemplazando el 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. recarga toda la página si la página está en caché

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

3. eliminar la página del historial para que los usuarios no puedan volver a visitar la página con los botones Atrás / Atrás

$(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 5

Su problema es causado por la memoria caché back-forward . Se supone que guarda el estado completo de la página cuando el usuario navega fuera. Cuando el usuario navega hacia atrás, la página del botón Atrás se puede cargar desde la memoria caché muy rápidamente. Esto es diferente del caché normal que solo almacena en caché el código HTML.

Cuando se carga la página para el evento onload bfcache no se activará. En su lugar, puede verificar la propiedad persisted del evento onpageshow . Se establece en falso en la carga de la página inicial. Cuando la página se carga desde bfcache, se establece en verdadero.

La solución de Kludgish es forzar una recarga cuando la página se carga desde bfcache.

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

Si está utilizando jQuery, haga lo siguiente:

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

Answer 6

Todas esas respuestas son un poco piratas informáticos. En navegadores modernos (safari) solo en el onpageshow solución en onpageshow ,

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

pero en dispositivos lentos a veces se verá durante una fracción de segundo antes de la vista en caché antes de que se vuelva a cargar. La forma correcta de manejar este problema es establecer correctamente Cache-Control en la respuesta del servidor a uno de los siguientes

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