2012-01-09 32 views
50

Se ha producido un problema con Safari al cargar los viejos videos de youtube cuando se hace clic en el botón Atrás. He intentado agregar onunload = "" (mencionado aquí Preventing cache on back-button in Safari 5) a la etiqueta de cuerpo, pero no funciona en este caso.Evitar que Safari se cargue desde la memoria caché cuando se hace clic en el botón Atrás

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

+0

posible duplicado de [botón de retroceso Mobile Safari] (http://stackoverflow.com/questions/11979156/mobile-safari-back-button) –

+0

@MikaTuupola la respuesta debe marcarse como la respuesta correcta. –

+0

Este es el humilde problema que también experimenté debido al mismo comportamiento de BFCache en Safari: http://stackoverflow.com/questions/40727989/is-onbeforeunload-cached-on-safari-macos/40896361?noredirect=1#comment69043078_40896361 – juanmirocks

Respuesta

139

Su problema es causado por back-forward cache. 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 bfcache onload el evento no se desencadenará. En su lugar, puede consultar 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 y luego hacer:

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

Esta es la única solución de trabajo que he encontrado hasta ahora, pero es bastante imperfecta ya que la página se muestra brevemente antes de volver a cargarla, y la solución se frustra fácilmente al deshabilitar JavaScript. ¿Alguien ha logrado encontrar una solución más completa? – lukens

+0

Esto no parece funcionar en Chrome para Android (no prueba ningún otro navegador móvil, por lo que limita mi declaración) – Dominique

1

Puede usar un ancla y ver 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, vuelve a http://acme.co, y la función de verificación de intervalo ve la falta de la etiqueta hash que establecemos, borra el intervalo y carga la URL de referencia con un sello de tiempo adjunto.

Hay algunos efectos secundarios, pero te dejaré para averiguar aquellos cabo;)

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

+2

gracioso, la única solución que funciona * todavía * obtiene una calificación negativa – daslicht

0

El comportamiento está relacionado con Volver caché de Safari/Adelante. Usted puede aprender acerca de ello en la documentación pertinente de Apple: http://web.archive.org/web/20070612072521/http://developer.apple.com/internet/safari/faq.html#anchor5

propia sugerencia solución de Apple es añadir 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 parece válido también, sólo quería hacer mella en la documentación y la otra solución potencial)

+2

el pirateo iframe no funcionó en safari/ios – commonpike

+0

La mejor solución que encontré fue aquí: http://stackoverflow.com/questions/20899274/how-to-refresh-page-on-back-button-click –

+1

No funciona en este momento –

0

en primer lugar ámbito de inserción en el código:

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

continuación, 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(); 
     } 
}); 
5

Sí, el navegador Safari no maneja la caché del botón hacia atrás/adelante del mismo modo que lo hace 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 y Safari 53 10,1

1. Detectar si el usuario está utilizando el botón de retroceso/foreward, vuelva a cargar la página entera o sólo recargar los marcos flotantes 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. recargar toda la página si la página se almacena en caché

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

3. eliminar la página de la historia para que los usuarios no pueden v isit la página de nuevo por la espalda/botones de avance

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

Todos aquellos respuesta son un poco de la corte. En los navegadores modernos (Safari) solamente en el trabajo, solución onpageshow

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

sino en dispositivos lentos a veces se verá a una segunda vista en caché emergente anterior antes de que se volverá a cargar. Forma adecuada para hacer frente a este problema radica en determinar con Cache-Control en la respuesta del servidor a un fuelle

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

Cuestiones relacionadas