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

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

Consulte la respuesta de esta pregunta para obtener más información: Actualizando la barra de direcciones con una nueva 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);
 }

A continuación, puede utilizar 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 de la manipulación del historial del navegador, consulte este artículo de MDN.

HTML5 introdujo el history.pushState() e history.replaceState() métodos, que le permiten agregar y modificar entradas del historial, respectivamente.

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

Leer más sobre esto en aquí

También puedes usar HTML5 reemplazarEstado 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.

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

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

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 Enlance en el navegador sin recargar la página. La URL representa cuál fue la última página cargada. Si lo cambia (document.location) luego volverá a cargar la página.

Una razón obvia es que escribes 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 www.mysite.com.

parent.location.hash = "hello";

En moderno navegadores 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 verifica si la página existe, por lo que si usa algún código JavaScript que reaccione 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 comprobar si history.pushState existen, luego continúe con el resto así:

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 # para <HTML5 browsers, que no recargará la página. Esa es la forma en que Angular usa para hacer SPA según hashtag ...

Cambiar # es bastante fácil, hacer como:

window.location.hash = "example";

Y puedes detectarlo así:

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

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

Antes de HTML5 podemos usar:

parent.location.hash = "hello";

y:

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

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

Si lo que está tratando de hacer es permitir que los usuarios marquen / compartan páginas, y no necesita que sea exactamente la URL correcta, y no está usando anclajes hash para nada más, puede hacerlo en dos partes; utiliza 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 en ella, y lo redirecciona al resultado posterior.

Por ejemplo:

1) El usuario está activado 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 agrega a marcadores.

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

5) Código en www.site.com/ redirige al usuario a www.site.com/section/page/6, 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.

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');

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

Utilice técnicas de reescritura de URL del lado del servidor como Mod_rewrite de Apache si no le gustan las URL que está utilizando actualmente.

Puede agregar etiquetas de anclaje. Utilizo esto en mi sitio para poder 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);

Puede utilizar esta hermosa y sencilla función en cualquier lugar de su aplicación.

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', title, new_url);
    
}

No solo puede editar la URL, sino que también puede actualizar el título.

Muy útil a todos.

Como señaló Thomas Stjernegaard Jeppesen, podría utilizar Historia.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 entre navegadores. Ahora se puede utilizar para administrar los estados del historial en navegadores compatibles con HTML5 y en muchos navegadores que solo admiten HTML4. En esta demostración Puedes ver un ejemplo de cómo funciona (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 hash (y hashbangs), consulte este enlace por Benjamin Lupton.

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

Para obtener más detalles sobre cómo diseñar y realizar los esfuerzos de seguimiento y evaluación, referirse al API de historial de HTML5 para más información.

Tu nueva URL.

let newUrlIS =  window.location.origin + '/user/profile/management';

En cierto sentido, llamar a pushState () es similar a configurar window.location = "#foo", ya que ambos también crearán y activarán otra entrada de historial asociada con el documento actual. Pero pushState () tiene algunas ventajas:

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

Este código me funciona. Lo usé en mi aplicación en ajax.

history.pushState({ foo: 'bar' }, '', '/bank');

Una vez que una página se carga en una ID usando ajax, cambia la URL del navegador automáticamente sin volver a cargar la página.

Esta es la función ajax a continuación.

function showData(){
    $.ajax({
      type: "POST",
      url: "Bank.php", 
      data: {}, 
      success: function(html){          
        $("#viewpage").html(html).show();
        $("#viewpage").css("margin-left","0px");
      }
    });
  }

Ejemplo: Desde cualquier página o controlador como "Panel de control", cuando hago clic en el banco, carga la lista de bancos usando el código ajax sin recargar la página. En este momento, no se cambiará la URL del navegador.

history.pushState({ foo: 'bar' }, '', '/bank');

Pero cuando uso este código en ajax, cambia la URL del navegador sin volver a cargar la página. Este es el código ajax completo aquí a continuación.

function showData(){
        $.ajax({
          type: "POST",
          url: "Bank.php", 
          data: {}, 
          success: function(html){          
            $("#viewpage").html(html).show();
            $("#viewpage").css("margin-left","0px");
            history.pushState({ foo: 'bar' }, '', '/bank');
          }
        });
      }

Esto es todo lo que necesitará para navegar sin recargar.

// add setting without reload 
location.hash = "setting";

// if url change with hash do somthing
window.addEventListener('hashchange', () => {
    console.log('url hash changed!');
});

// if url change do somthing (dont detect changes with hash)
//window.addEventListener('locationchange', function(){
//    console.log('url changed!');
//})


// remove #setting without reload 

history.back();