window.location.hash ¿actualizar en Chrome?

Question

Estaba haciendo un poco de espionaje en la web y encontré que window.location.hash = "etc" es un método ampliamente utilizado para actualizar la ubicación del navegador sin tener que volver a cargar/actualizar la página. He solicitado que, para este ejemplo he cocinado hasta: http://dl.dropbox.com/u/1595444/locationExample/index.html

funciona bien en Safari, pero ...

Lo que he notado es que en Chrome 10+ al cambiar hash:

Hay algo similar a una recarga.

El síntoma resultante es un contratiempo cuando el usuario se desplaza hacia abajo o hacia arriba.

La salida de mi consola está conservada (si revisa su consola, las cadenas del proyecto se envían).

Parece que el favicon se está recargando.

¿Alguien ha tenido este problema antes? ¿Sabes una solución?

Answer 1

Hay muy probablemente dos cosas que suceden aquí:

• el favicon y detener/botones de actualización parpadean debido a Chrome bug (que menciona pushState, pero los cambios de patata son en la misma ruta de código).
• El pequeño inconveniente cuando se desplaza es porque Chrome realiza un repintado de página completa y una escala de alta calidad para actualizar la miniatura de la página, ya que considera los cambios hash como la generación de una nueva URL. Eso también es a bug. Puede ver esto en la vista de línea de tiempo del inspector, la mayoría de los eventos de desplazamiento dan como resultado un repinte de ancho de ventana x una pequeña altura, pero ocasionalmente habrá un repintado de ventana completa. This blog post tiene algunos detalles más.

Una solución para ambos sería diferir la actualización del hash hasta que el usuario termine de desplazarse (aún puede actualizar la barra blanca que aparece debajo del elemento actual inmediatamente). Usted puede hacer esto por tener algo como:

var scrollTimeout; 
window.onscroll = function() { 
    // update current item display here 
    if (scrollTimeout) 
    clearTimeout(scrollTimeout); 
    scrollTimeout = setTimeout(function() { 
    scrolTimeout = undefined; 
    // update hash here 
    }, 100); 
}; 

Ya que parece que estás usando jQuery, hay debouncing plugins que puede ser útil.

Answer 2

no tengo una respuesta definitiva, pero primero me gustaría probar:

1. agregar el prefijo a la almohadilla (#) en el valor (es decir, utilizar window.location.hash = "#etc") .
2. Registre un controlador para el controlador window.onhashchange.
3. Alternativamente, puede considerar usar history.pushState si lo que está tratando de lograr es hacer que el botón Atrás retorne a la ubicación lógica anterior (no está claro para mí lo que está tratando de lograr, ya sea que quiera ir a una sección de la página, o algo más complejo).

Answer 3

var r='#hello'; 
if(navigator.userAgent.indexOf('Chrome/')!=-1){ 
top.history.pushState("", "", r); 
return; 
}; 
if(r.charAt(0)=='/'){ 
    top.location.replace(r); 
}else{ 
    top.location.hash=r; 
}; 

Funcionó para mí. Y en realidad me tomó mucho tiempo resolver esto. Firefox también admite el objeto history ahora, por lo que es posible que podamos deshacernos de todo el "hash" en pocos años.

EDITAR: Sí, la recarga es un error de Chrome.