¿Es posible cambiar el URL mientras se desplaza hacia abajo en una página con ajax? Tengo un sitio web en una página y quiero tener este efecto.¿Es posible cambiar el URL mientras se desplaza hacia abajo en una sola página?
ejemplo:
www.blablabla.com/blog
usuario de desplazamiento hacia abajo ...
www.blablabla.com/blog/entry-name
que sé de hash ... puedo enmascarar la URL?
No. No estoy seguro de por qué querrías hacerlo.
Como mencionaste, la única manera sería agregarlo al hash de la página, ej.
http://www.website.com/blog/#entry-name
Entonces para desplazarse a esa parte de la página, algo así como:
if (window.location.indexOf("#") > 0) {
var entry_id = window.location.substring(window.location.indexOf("#"));
$('html, body').animate({
scrollTop: $(entry_id).offset().top
}, 2000);
}
EDIT: Esto es desde hace mucho tiempo es posible con window.history.pushState.
Me gustaría hacer eso para que cuando se comparta una publicación de blog se coloque en el lugar correcto de la página. – eptype
Claro, mira la edición de mi publicación. – dtbarne
para poder enmascarar esa URL desde www.homepage.com/blog/#entryname a www.homepage.com/blog/nombre de inicio – eptype
No, por razones de seguridad no se le permite cambiar la URL usando javascript
En realidad, no está permitido cambiarlo sin refrescar. – Bakudan
¿qué motivos de seguridad? – eptype
bien al cambiar la URL, podría engañar al usuario para que crea que está en un sitio web y realmente no lo está. Al igual que visitan www.blablabla.com/blog y cambian la URL a www.yourbank.com, podrían creer que están viendo su sitio web bancario. – CodeMan
Sí, se puede, pero es un poco difícil.
Si tiene esto en su index.html página:
<a id="link-to-later" href="#later">Go to later</a>
<p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p>
<a id="later" name="later">Some later anchor</a>
A continuación, haga clic en el enlace de arriba le llevará al ancla a continuación sin necesidad de recargar la página y la URL será index.html#later.
Al usar el evento window.onscroll puede conectar un evento al usuario desplazándose hacia abajo en la página. El controlador de eventos podría incluir algo como $('#link-to-later').click(), que enviaría el navegador del usuario para señalar en la página con el ancla later.
Tendrá que hacer un trabajo para evitar que esto sea demasiado entrecortado, pero es factible.
no ha visto la respuesta de @dtbarne antes - verifique que haya sido – smartcaveman
Puede usar pushState() para modificar la URL mostrada en la barra de la URL del navegador sin volver a cargar ni usar el hash. Siempre y cuando su navegador sea compatible con HTML5.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
Sé que esto es un poco de una cuestión mayor, pero cambió los navegadores, y en este momento, es posible hacer lo que solicitó el cartel. Esto significa que la mayoría de las otras respuestas ya no son válidas. Estoy publicando una forma de lograr esto para que pueda ayudar a las personas que usan Google a encontrar la respuesta correcta.
En resumen, en los navegadores modernos (navegadores con compatibilidad con HTML 5) puede. Por favor, eche un vistazo al artículo this.
Básicamente se reduce a la siguiente línea de código:
window.history.pushState("object or string", "Title", "/new-url");
La ejecución del código va a cambiar la dirección URL con el ejemplo.com/new-url, y lo ayudará a lograr lo que quería.
Para una demostración, puede consultar el Webby Awards, donde se usa este método. Simplemente desplácese hacia arriba o hacia abajo y mire la dirección al descubierto. El efecto es bastante impresionante.
Gracias por su respuesta. Esto era exactamente lo que estaba buscando. Otro buen ejemplo: rollingstone.com/music/lists/15-great-albums-you-didnt-hear-in-2014-20141217 –
¿qué pasa con https://github.com/browserstate/history.js/history.js
incluyendo el apoyo continuo de datos, títulos, replaceState. Admite jQuery, MooTools y Prototype. Para navegadores HTML5, esto significa que puede modificar la URL directamente, sin la necesidad de usar hashes más.
Tengo curiosidad por ver a dónde va esto, pero mi intuición es que es una mala práctica. Entonces, si estoy mirando la página de inicio de dicho blog blabla y estoy bajando varias publicaciones, la barra de direcciones cambiará dinámicamente, de modo que cuando copie y pegue esa URL a un amigo, verán la página en el mismo marcador/posición de desplazamiento ? – pixelbobby
sí, esto es lo que me gustaría que sucediera. – eptype
mejor cruce los dedos en este ... – pixelbobby