Se están eliminando los hash/anclajes de las URL en móviles. ¿Cómo evitarlo?

Cuando hago clic en un enlace con un anclaje en el escritorio, se desplaza hasta allí. Sin embargo, en dispositivos móviles (Android, FF y Chrome), el anclaje se elimina de la URL, por lo que no hay desplazamiento hasta ese punto.

Lo que estoy intentando hacer:

Tenemos un documento largo de directrices y preguntas frecuentes que necesita vincularse a encabezados. Como Discourse elimina los parámetros id, he creado un componente de tema simple que utiliza atributos de datos personalizados en el documento objetivo y escucha los anclajes en la URL para desplazarse al elemento con el atributo de datos coincidente.

¡Funciona en el escritorio!

Sin embargo, en dispositivos móviles, los anclajes parecen eliminarse, de modo que cuando llegas a la página objetivo, no hay desplazamiento hasta el elemento correcto. Y, por supuesto, con un documento largo, es en dispositivos móviles donde más necesitas esa navegación.

Ahora, sí encuentro que los anclajes generados por el componente Tabla de contenidos funcionan cuando se abren en un nuevo enlace. No se eliminan de la URL y el navegador se desplaza hasta el lugar correcto.

¿Cómo puedo hacer que esto funcione?

Pequeña actualización…

Alguien sugirió usar parámetros de consulta en su lugar. Esos no parecen ser eliminados en dispositivos móviles. Pero, increíblemente, sí se eliminan en escritorio.

Aquí hay algunas publicaciones relacionadas, aunque no abordan el problema específico de que se eliminen las URL…

no uso Android, así que no puedo probar esto, pero he usado enlaces a encabezados muchas veces y funcionan perfectamente en mi iPhone. me pregunto por qué usas anclas de id en lugar de simplemente enlazar al encabezado que quieres.

por ejemplo, ¿esto funciona para ti? configuración de Cloudflare R2

¿puedes dar un ejemplo de cómo se ve tu enlace de ancla? quizás no entiendo bien lo que intentas lograr.

Porque esos enlaces a encabezados son extremadamente frágiles. Así es como se ve el que proporcionaste:

https://meta.discourse.org/t/-/148916#p-738234-cloudflare-r2-13

¿Ves ese -13 al final? Está ahí porque es el decimotercer encabezado. En cuanto agregues un nuevo encabezado antes en el documento, se romperá. Y, por supuesto, si cambias el texto del encabezado, también se romperá.

Cuando digo que se rompe, me refiero a los cambios en el documento de destino. Por lo que puedo ver, esos anclajes se generan dinámicamente cuando se carga la página. Así que si estás utilizando el plugin TOC, cambiar el documento no es un problema.

En nuestro caso de uso, se está enlazando a una sección de preguntas frecuentes. Por lo tanto, no es inusual agregar nuevas preguntas o encabezados.

Pero tienes razón en que Discourse parece detectar el patrón de esos anclajes y permite que pasen. Pero si no coincide con el patrón esperado, se elimina.

Son simplemente identificadores alfanuméricos ordinarios. Así que si intentara crear un anclaje para tu ejemplo anterior, simplemente usaría cloudflare-r2.

¿Te serviría algo como esto?

<a name="cloudflare-r2"></a>
## Configuración de Cloudflare R2

Esto mantiene el ancla separada del encabezado, y podrías añadir #cloudflare-r2 al final de la URL para enlazar a ella.

En mis pruebas, el procesador de Markdown elimina los atributos name. Este es el origen de mi primer problema.

Sin embargo, el problema que planteo en este tema es que, incluso si pudiera hacer que ese anclaje funcionara, en dispositivos móviles se elimina #cloudflare-r2. Esto no ocurre en escritorio.

Ah, veo. Sí, parece que el editor de texto enriquecido elimina esos elementos, pero el editor de Markdown no… en el editor enriquecido creo que tendrías que envolverlo en un div para que conserve el HTML.

 <div><a name="x"></a></div>

Ya lo he intentado. Sigue sin funcionar. Además, no puedo depender de que alguien en el futuro no use el editor de Markdown.

He colocado ese HTML arriba en el editor de texto enriquecido para probarlo. Veamos qué pasa…

¡Vale! ¡Parece que funciona en ambos casos! Y, para colmo, en ambos editores.

Necesito hacer más pruebas, especialmente en móvil. Seguiré trabajando en esto y os mantendré informados.

¡Gracias!