refrescar - reemplazar url con javascript




Modificar la URL sin volver a cargar la página. (13)

¡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 .

¿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

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

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

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

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.


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


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.


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

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


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.


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


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 .


parent.location.hash = "hello";




friendly-url