programacion - que es javascript y para que sirve

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

Question

¿Cómo podría tener una acción de JavaScript que pueda tener algunos efectos en la página actual pero también cambiaría la URL en el navegador de modo que si el usuario hace clic en recargar o marca la nueva URL que se usa?

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

Estoy tratando de registrar el estado de JavaScript en la URL.

Answer 1

Con HTML 5, use la función history.pushState . 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 del botón Atrás, use history.replaceState lugar.

Answer 2

Hay location.hash = ''texto'' en http://probablyinteractive.com/url-hunter

Answer 3

Hay un componente de Yahoo YUI (Browser History Manager) que puede manejar esto: http://developer.yahoo.com/yui/history/

Answer 4

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

Creo que esto es lo que necesitas.

Answer 5

He tenido éxito con:

location.hash="myValue";

Simplemente agrega #myValue a la URL actual. Si necesita activar un evento en la página Cargar, puede usar la misma location.hash para verificar el valor relevante. Solo recuerda eliminar el # del valor devuelto por location.hash por ejemplo

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

Answer 6

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ía.

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

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

Espero que te ponga en el camino correcto.

Answer 7

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 8

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

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

Esto no volverá a cargar la página, puede hacer uso de ella con el evento de javascript

Answer 9

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

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

O simplemente permita que la persona cambie el parámetro de obtención, por lo que vamos a location.get = me=1&page=1 .

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

El problema con # es que los datos no se almacenan en caché (al menos no lo creo) cuando se cambia el hash. Entonces, es como cada vez que se carga una nueva página, mientras que los botones de avance y retroceso en una página que no es Ajax pueden almacenar datos en la caché y no dedican tiempo a volver a cargar los datos.

Por lo que vi, la historia de Yahoo ya carga todos los datos a la vez. No parece estar haciendo ninguna solicitud de Ajax. Entonces, cuando se usa un div para manejar diferentes horas extraordinarias de métodos, esos datos no se almacenan para cada estado histórico.

Answer 10

Si desea que funcione en navegadores que no son compatibles con history.pushState e history.popState , la forma "antigua" es configurar el identificador del fragmento, que no causará una recarga de la página.

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

Si está utilizando jQuery, hay un complemento de hashchange que utilizará cualquier método que admita el navegador. Estoy seguro de que también hay complementos para otras bibliotecas.

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

Answer 11

Sospecho fuertemente 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 se pareciera a una página de inicio de sesión de un banco, y hacer que la URL en la barra de direcciones se parezca al banco real .

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

[Editar en 2011: desde que escribí esta respuesta en 2008, más información ha salido a la luz con respecto a una developer.mozilla.org/en/DOM/Manipulating_the_browser_history que permite modificar la URL siempre que sea del mismo origen]

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

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

Si, como suena, desea registrar el estado de javascript en la URL para que pueda marcarse como favorito, sin volver a cargar la página, adjúntela a la URL actual después de un # y haga que una parte de javascript sea activada por el evento onload. URL para ver si contiene estado guardado.

Si usas 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 un problema; y esto hará que los botones de avance y retroceso funcionen correctamente también.

Answer 14

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

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 usa 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 de JavaScript asociado con la nueva entrada de historial creada por pushState() . Cuando el usuario navega al nuevo estado, se activa un evento popstate, y la propiedad estatal del evento contiene una copia del objeto de estado de la entrada del historial.

   El objeto de estado puede ser cualquier cosa que pueda ser serializado. 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 más grande que esto para pushState() , el método lanzará una excepción. Si necesita más espacio que este, le recomendamos que use sessionStorage y / o localStorage.

2. Título : Firefox actualmente ignora este parámetro, aunque puede usarlo en el futuro. Pasar la cadena vacía aquí debe ser seguro contra futuros cambios en el método. Alternativamente, puede pasar un título corto para el estado al que se muda.

3. URL : la nueva URL de la entrada del historial está dada por este parámetro. 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. La nueva URL no necesita ser 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.