Cambie la URL en el navegador sin cargar la nueva página usando JavaScript

Question

¿Cómo tendría un javascript ¿Acción que puede tener algunos efectos en la página actual pero que también cambiaría la URL en el navegador, de modo que si el usuario presiona recargar o marcar como favorita se usa la nueva URL?

También sería bueno si el botón Atrás recargara la URL original.

Estoy intentando registrar el estado de JavaScript en la URL.

Answer 1

Con HTML 5, use la función history.pushState función . Como ejemplo:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

y un href:

<a href="#" id='click'>Click to change url to bar.html</a>

---

Si desea cambiar la URL sin agregar una entrada a la lista de botones de retroceso, use history.replaceState en su lugar.

Answer 2

Si desea que funcione en navegadores que no son compatibles history.pushState y history.popState sin embargo, la forma "antigua" es establecer el identificador de fragmento, lo que no provocará la recarga de la página.

La idea básica es establecer el window.location.hash propiedad a un valor que contenga cualquier información de estado que necesite, luego use el evento window.onhashchange, o para navegadores más antiguos que no soportan onhashchange (IE < 8, Firefox < 3.6), verifique periódicamente si el hash ha cambiado (usando setInterval por ejemplo) y actualizar la página.También deberá verificar el valor hash al cargar la página para configurar el contenido inicial.

Si estás usando jQuery hay un complemento de cambio de hash que utilizará cualquier método que admita el navegador.Estoy seguro de que también hay complementos para otras bibliotecas.

Una cosa con la que hay que tener cuidado es colisionar con los identificadores de la página, porque el navegador se desplazará a cualquier elemento con un identificador coincidente.

Answer 3

window.location.href contiene la URL actual. Puede leerlo, puede agregarlo y puede reemplazarlo, lo que puede provocar una recarga de la página.

Si, como parece, desea registrar el estado de JavaScript en la URL para que se pueda agregar a favoritos, sin volver a cargar la página, añádala a la URL actual después de un # y tenga una pieza de JavaScript activada por el evento onload analizar la URL actual para ver si contiene el estado guardado.

Si usa un? en lugar de un #, forzará una recarga de la página, pero dado que analizará el estado guardado en la carga, esto puede no ser realmente un problema; y esto hará que los botones de avance y retroceso también funcionen correctamente.

Answer 4

Sospecharía firmemente que esto no es posible, porque sería un problema de seguridad increíble si lo fuera. Por ejemplo, podría hacer una página que pareciera una página de inicio de sesión bancaria, y hacer que la URL en la barra de direcciones se vea como el banco real !

Quizás si explican por qué quieren hacer esto, la gente podría sugerir enfoques alternativos ...

[Editar en 2011: desde que escribí esta respuesta en 2008, ha salido a la luz más información sobre un técnica HTML5 que permite modificar la URL siempre que sea del mismo origen]

Answer 5

La configuración de seguridad del navegador evita que las personas modifiquen la URL mostrada directamente. Podrías imaginar las vulnerabilidades de phishing que causarían.

La única forma confiable de cambiar la URL sin cambiar las páginas es usar un enlace interno o hash. por ejemplo: http://site.com/page.html se convierte en http://site.com/page.html#item1 . Esta técnica se usa a menudo en hijax (AJAX + preservar historial).

Al hacer esto, a menudo solo usaré enlaces para las acciones con el hash como href, luego agregaré eventos de clic con jquery que usan el hash solicitado para determinar y delegar la acción.

Espero que eso te ponga en el camino correcto.

Answer 6

jQuery tiene un gran complemento para cambiar la URL de los navegadores, llamado jQuery-empujador.

javascript pushState y jQuery podrían usarse juntos, como:

history.pushState(null, null, $(this).attr('href'));

Ejemplo:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

Usando solo javascript history.pushState(), que cambia la referencia, que se utiliza en el encabezado HTTP para los objetos XMLHttpRequest creados después de cambiar el estado.

Ejemplo:

window.history.pushState("object", "Your New Title", "/new-url");

El método pushState():

pushState() toma tres parámetros:un objeto de estado, un título (que actualmente se ignora) y (opcionalmente) una URL.Examinemos cada uno de estos tres parámetros con más detalle:

1. objeto de estado — El objeto de estado es un objeto JavaScript que está asociado con la nueva entrada del historial creada por pushState().Cada vez que el usuario navega al nuevo estado, se activa un evento popstate y la propiedad de estado del evento contiene una copia del objeto de estado de la entrada del historial.

   El objeto de estado puede ser cualquier cosa que pueda serializarse.Debido a que Firefox guarda los objetos de estado en el disco del usuario para que puedan restaurarse después de que el usuario reinicie su navegador, imponemos un límite de tamaño de 640k caracteres en la representación serializada de un objeto de estado.Si pasa un objeto de estado cuya representación serializada es mayor que esto a pushState(), el método generará una excepción.Si necesita más espacio que este, le recomendamos que utilice sessionStorage y/o localStorage.

2. título — Firefox ignora actualmente este parámetro, aunque es posible que lo utilice en el futuro.Pasar la cadena vacía aquí debería ser seguro contra futuros cambios en el método.Alternativamente, puedes pasar un título corto para el estado al que te mudas.

3. URL — Este parámetro proporciona la URL de la nueva entrada del historial.Tenga en cuenta que el navegador no intentará cargar esta URL después de una llamada a pushState(), pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie su navegador.No es necesario que la nueva URL sea absoluta;si es relativo, se resuelve en relación con la URL actual.La nueva URL debe ser del mismo origen que la URL actual;de lo contrario, pushState() lanzará una excepción.Este parámetro es opcional;si no se especifica, se establece en la URL actual del documento.

Answer 7

Hay un componente Yahoo YUI (Administrador del historial del navegador) que puede manejar esto: http: // developer.yahoo.com/yui/history/

Answer 8

La galería de fotos de Facebook hace esto usando un #hash en la URL. Aquí hay algunos ejemplos de URL:

Antes de hacer clic en 'siguiente':

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

Después de hacer clic en 'siguiente':

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

Tenga en cuenta el hash-bang (#!) seguido inmediatamente por la nueva URL.

Answer 9

Hay un complemento jquery http://www.asual.com/jquery/address/

Creo que esto es lo que necesitas.

Answer 10

Lo que funciona para mí es - history.replaceState() función que es la siguiente -

history.replaceState(data,"Title of page"[,'url-of-the-page']);

Esto no volverá a cargar la página, puedes usarla con el evento de javascript

Answer 11

Me preguntaba si será posible siempre que la ruta principal en la página sea la misma, solo se le agregue algo nuevo.

Entonces, digamos que el usuario está en la página: http://domain.com/site/page.htmlEntonces el navegador puede dejarme hacer location.append = new.htmly la página se convierte en: http://domain.com/site/page.htmlnew.html y el navegador no lo cambia.

O simplemente permitir que la persona cambie el parámetro get, así que location.get = me=1&page=1.

Entonces la página original se convierte http://domain.com/site/page.html?me=1&page=1 y no actualiza.

El problema con # es que los datos no se almacenan en caché (al menos no lo creo) cuando se cambia el hash.Por lo tanto, es como cada vez que se carga una nueva página, mientras que los botones de avance y retroceso en una página noÁjax La página puede almacenar datos en caché y no perder tiempo recargando los datos.

Por lo que vi, el historial de Yahoo ya carga todos los datos a la vez.No parece estar realizando ninguna solicitud de Ajax.Así que cuando un div se utiliza para manejar diferentes métodos en horas extras, esos datos no se almacenan para cada estado del historial.

Answer 12

mi código es:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

y acción:

setLocation('http://example.com/your-url-here');

y ejemplo

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

Eso es todo :)

Answer 13

He tenido éxito con:

location.hash="myValue";

Simplemente agrega #myValue a la URL actual. Si necesita activar un evento en la carga de la página, puede usar el mismo location.hash para verificar el valor relevante. Solo recuerde eliminar el # del valor devuelto por <=> por ejemplo

var articleId = window.location.hash.replace("#","");

Answer 14

Una respuesta más simple que presento,

window.history.pushState(null, null, "/abc")

esto agregará /abc después del nombre de dominio en la URL del navegador. Simplemente copie este código y péguelo en la consola del navegador y vea que la URL cambia a & Quot; https://stackoverflow.com/abc "