javascript - reemplazar - Modificar la URL sin volver a cargar la página.

modificar url js

Question

¿Hay alguna manera 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 del dominio, por lo que no es como si estuviera violando políticas entre dominios.

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

Answer 1

¡Ahora se puede hacer en Chrome, Safari, FF4 + e IE10pp4 +!

Consulta la respuesta de esta pregunta para obtener más información: Actualizar la barra de direcciones con una nueva URL sin hash ni recargar 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);
 }

Luego puede usar window.onpopstate para detectar la navegación hacia atrás / adelante con el botón:

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

Para ver más a fondo la manipulación del historial del navegador, consulte este artículo de MDN .

Answer 2

A continuación se muestra la función para cambiar la URL sin volver a cargar la página. Solo soporta 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 3

Antes de HTML5 podemos utilizar:

parent.location.hash = "hello";

y:

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

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

Answer 4

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

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

Answer 5

Como lo señaló Thomas Stjernegaard Jeppesen, puede usar History.js para modificar los parámetros de la 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 con varios navegadores. Ahora se puede usar para administrar los estados del historial en HTML5, así como en muchos navegadores que solo utilizan HTML4. En esta demostración , puede 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.

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

Answer 6

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

Use técnicas de reescritura de URL del lado del servidor como mod_rewrite de Apache si no le gustan las URL que está usando actualmente.

Answer 7

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

Puede usarlo así, tomará 3 parámetros, 1) estado del objeto 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, tampoco verifica si existe la página, por lo que si hace 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 verificar si existe history.pushState y 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 # para <HTML5 browsers , que no volverán a cargar la página, así es como Angular utiliza el 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 8

Es posible sin usar hashes, eche un vistazo al complemento de jQuery Address habitual :

Ejemplo here .

Tenga en cuenta que utilizará hashes en IE, no hay ninguna solución para ello.

Answer 9

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

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

Lea más sobre esto desde here

Answer 10

La respuesta de 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 las características de estado de HTML5 y proporciona soporte adicional para los navegadores HTML4.

Answer 11

Puede agregar etiquetas de anclaje. Uso esto en mi sitio http://www.piano-chords.net/ para poder rastrear con Google Analytics lo que la gente está visitando 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 12

Si lo que estás tratando de hacer es permitir a los usuarios marcar / compartir páginas, y no necesitas que sea exactamente la URL correcta, y no estás utilizando anclajes hash para nada más, entonces puedes hacerlo en dos partes; utiliza la ubicación.hash que se discutió anteriormente, y luego implementa una comprobación en la página de inicio, para buscar una URL con un ancla de hash en ella 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). Digamos que ha cargado el contenido correcto para la página 6 en la página, por lo que, aparte del hash, el usuario no está demasiado perturbado.

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

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

5) El código en www.site.com/ redirecciona 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.

Answer 13

Suponiendo que no esté intentando hacer algo malicioso, cualquier cosa que le gustaría hacer a sus propias URL se puede convertir en htaccess .

Answer 14

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.

Answer 15

Use history.pushState() de HTML 5 History API

Consulte el enlace para obtener más detalles HTML5 History API

Answer 16

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

Answer 17

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

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

Una razón obvia es que 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 no estará enterado de que realmente está mirando www.mysite.com .

Answer 18

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

Puedes ver aquí Actualizar la URL del navegador sin recargar la página

Answer 19

parent.location.hash = "hello";