¿Cómo modifico la URL sin volver a cargar la página?

Question

¿Hay alguna forma de modificar la URL de la página actual sin volver a cargar la página?

Me gustaría acceder a la parte antes del # hash si es posible.

Solo necesito cambiar la parte después de el dominio, por lo que no es que esté violando las políticas entre dominios.

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads

Answer 1

Esto ahora se puede hacer en Chrome, Safari, Firefox 4+ e Internet & nbsp; Explorer & nbsp; 10pp4 +!

Consulte la respuesta de esta pregunta para obtener más información: Actualizando la barra de direcciones con nuevo URL sin hash o recargando la página

Ejemplo:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

Puede usar window.onpopstate para detectar la navegación del botón de retroceso / avance:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

---

Para obtener una visión más detallada sobre la manipulación del historial del navegador, consulte este artículo de MDN .

Answer 2

HTML5 presentó el history.pushState() y history.replaceState() métodos, que le permite agregar y modificar entradas del historial, respectivamente.

window.history.pushState('page2', 'Title', '/page2.php');

Lea más sobre esto en aquí

Answer 3

También puede usar HTML5 replaceState si desea cambiar la URL pero no desea agregar la entrada al historial del navegador:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

Esto 'rompería' la funcionalidad del botón de retroceso. Esto puede ser necesario en algunos casos, como una galería de imágenes (donde desea que el botón Atrás regrese a la página de índice de la galería en lugar de retroceder a través de todas y cada una de las imágenes que vio) mientras le da a cada imagen su propia URL única.

Answer 4

NOTA: Si está trabajando con un navegador HTML5, debe ignorar esta respuesta. Esto ahora es posible como se puede ver en las otras respuestas.

No hay forma de modificar el URL en el navegador sin volver a cargar la página. La URL representa la última página cargada. Si lo cambia (document.location), volverá a cargar la página.

Una razón obvia es que usted escribe un sitio en www.mysite.com que parece una página de inicio de sesión bancaria. Luego cambia la barra de URL del navegador para decir www.mybank.com. El usuario ignorará por completo que realmente está mirando <=>.

Answer 5

parent.location.hash = "hello";

Answer 6

Aquí está mi solución (newUrl es su nueva URL que desea reemplazar con la actual):

history.pushState({}, null, newUrl);

Answer 7

El HTML5 replaceState es la respuesta, como ya lo mencionaron Vivart y geo1701. Sin embargo, no es compatible con todos los navegadores / versiones. History.js envuelve características de estado HTML5 y proporciona soporte adicional para navegadores HTML4.

Answer 8

En los navegadores modernos y HTML5 , hay un método llamado pushState en la ventana history. Eso cambiará la URL y la enviará al historial sin cargar la página.

Puede usarlo así, tomará 3 parámetros, 1) objeto de estado 2) título y una URL):

window.history.pushState({page: "another"}, "another page", "example.html");

Esto cambiará la URL, pero no volverá a cargar la página. Además, no comprueba si la página existe, por lo que si hace algún código JavaScript que reacciona a la URL, puede trabajar con ellos de esta manera.

¡También hay history.replaceState() que hace exactamente lo mismo, excepto que modificará el historial actual en lugar de crear uno nuevo!

También puede crear una función para verificar si history.pushState existe, luego continuar con el resto de esta manera:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

También puede cambiar el # por <HTML5 browsers, que no volverá a cargar la página. Esa es la forma en que Angular hace SPA según el hashtag ...

Cambiar <=> es bastante fácil, haciendo como:

window.location.hash = "example";

Y puedes detectarlo así:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

Answer 9

Antes de HTML5 podemos usar:

parent.location.hash = "hello";

y:

window.location.replace("http:www.example.com");

Este método volverá a cargar su página, pero HTML5 introdujo el history.pushState(page, caption, replace_url) que no debería volver a cargar su página.

Answer 10

Si lo que intenta hacer es permitir a los usuarios marcar / compartir páginas, y no necesita que sea exactamente la URL correcta, y no está utilizando anclas hash para nada más, entonces puede hacer esto en dos partes; usa el location.hash mencionado anteriormente y luego implementa una verificación en la página de inicio para buscar una URL con un ancla de hash y redirigirlo al resultado posterior.

Por ejemplo:

1) El usuario está en www.site.com/section/page/4

2) El usuario realiza alguna acción que cambia la URL a www.site.com/#/section/page/6 (con el hash). Supongamos que ha cargado el contenido correcto para la página 6 en la página, por lo que, aparte del hash, el usuario no se molesta demasiado.

3) El usuario pasa esta URL a otra persona o la marca como marcador

4) Alguien más, o el mismo usuario en una fecha posterior, va a www.site.com/

5) El código en www.site.com/section/page/6 redirige al usuario a <=>, usando algo como esto:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

¡Espero que tenga sentido! Es un enfoque útil para algunas situaciones.

Answer 11

Cualquier cambio de la loción (ya sea window.location o document.location) provocará una solicitud en esa nueva URL, si & # 8217; no solo está cambiando el fragmento de URL. Si cambia la URL, cambia la URL.

Use técnicas de reescritura de URL del lado del servidor como Apache & # 8217; s mod_rewrite si no & # 8217; no le gustan las URL que está utilizando actualmente.

Answer 12

A continuación se muestra la función para cambiar la URL sin volver a cargar la página. Solo es compatible con HTML5.

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

Answer 13

Puede agregar etiquetas de anclaje. Lo uso en mi sitio http://www.piano-chords.net/ para que yo puede rastrear con Google Analytics lo que las personas visitan en la página.

Solo agrego una etiqueta de anclaje y luego la parte de la página que quiero rastrear:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

Answer 14

Como señaló Thomas Stjernegaard Jeppesen, puede usar History.js para modificar los parámetros de URL mientras el usuario navega a través de sus enlaces y aplicaciones Ajax.

Ha pasado casi un año desde esa respuesta, y History.js creció y se volvió más estable y de navegador cruzado. Ahora se puede usar para administrar estados de historial en HTML5 compatible, así como en muchos navegadores solo HTML4. En esta demostración puede ver un ejemplo de cómo funciona (como además de poder probar sus funcionalidades y límites.

Si necesita ayuda sobre cómo usar e implementar esta biblioteca, le sugiero que eche un vistazo al código fuente de la página de demostración: verá que es muy fácil de hacer.

Finalmente, para obtener una explicación completa de cuáles pueden ser los problemas relacionados con el uso de hashes (y hashbangs), consulte este enlace por Benjamin Lupton.

Answer 15

Utilice history.pushState() de la API de historial de HTML 5.

Consulte la API de historial HTML5 para obtener más detalles.

Answer 16

Uso:

    let stateObject = { foo: "bar" };
    history.pushState(stateObject, "page 2", "newpage.html");

Puede verlo en la publicación del blog Actualizar URL del navegador sin recarga de página .

Answer 17

Use window.history.pushState("object or string", "Title", "/new-url"), pero aún enviará una nueva solicitud de URL al servidor.

Answer 18

Suponiendo que no está tratando de hacer algo malicioso, cualquier cosa que le gustaría hacer a sus propias URL puede ser creada con htaccess .