¿Cómo puedo enviar una clave hash en un parámetro de URL?

Question

Tengo una aplicación Spring-MVC con Freemarker como componente de vista.

En mis plantillas, se generan varios enlaces que apuntan a mi aplicación y que incluyen parámetros de URL que contienen una clave hash (#).

Ejemplo:

parámetro: Q#106368 11

URL generado por Freemarker con PARAM codificada: testurl.html?key=Q%23106368%2011

utilizo JavaScript para redirigir a esta dirección URL (razón: Yo uso JS para gestionar la carga de 2 marcos al mismo tiempo).

El método de redirección es simple:

function redir(url) { 
     window.location.href = url; 
    } 

La llamada JS generada por Freemarker parece

<a href="javascript:redir('http://localhost:8080/testappp/testurl.html?key=Q%23106368%2011');">test</a> 

Mi problema es que el navegador/Javascript convierte de nuevo el parámetro URL codificada, piensa que hay a # y corta allí.

Cuando uso window.location.href='http://...' directamente funciona. Solo cuando se utiliza el parámetro del método, parece que se decodifica URL mágicamente y luego la redirección falla porque la URL se corta en el #.

¿Hay una manera fácil de transmitir el parámetro correctamente?

Soy consciente de que podría reemplazar el #, p. Ej. con $$$hash$$$, en la plantilla y hacer el reemplazo en el lado del servidor de nuevo. Pero hay tantos lugares que tendría que cambiar ...

Answer 1

Como Marc B comentó, es necesario volver a codificar la URL. El método sería encodeURI(). Sin embargo, este método no codifica el signo #. Para mi caso de uso específico, tengo que reemplazar el signo # con %23 después de la codificación.

El método de redirección JS finalmente parece:

function redir(url) { 
     url = encodeURI(url); 
     url = url.replace(/#/g, '%23'); 
     window.location.href = url; 
    } 

Comparing escape(), encodeURI(), and encodeURIComponent()

Answer 2

¿Qué navegador estás usando? Estoy probando FireFox 5 y no convierte %23 de nuevo en # en mi prueba. Cuando pasa el mouse sobre el enlace o copia la ubicación del enlace, ¿qué tiene eso? ¿Estás seguro de que lo que está emitiendo el enlace no está haciendo la conversión?

actualización

Esto no es ideal, pero parece que los que resuelve el problema:

<a onclick="url = 'http://localhost:8080/testappp/testurl.html?key=Q%23106368%2011';" href="javascript:redir(url);">test</a> 

Parece que se decodifica el atributo href. Cuando paso el mouse sobre él, vi el # en lugar del %23.

Answer 3

encodeURIComponent/decodeURIComponent es más profundo que simplemente encodeURI, será decodificar/codificar '#' y el evento '/'