Problemas atributo NAME y elemento BASE, solución: Javascript

Hoy tuve que agregar un atributo NAME a la página web de compra y venta de equipo médico, Medicalmex ya que tengo un menú y queria que al picarle en las opciones me mandara a una sección definida de la página, de ahi que se utiliza el atributo NAME dentro de una etiqueta A (para enlaces), teniendo algo como: Pie de página y mandar llamarla de la siguiente forma: Ir al pie de página , hasta este punto todo muy normal con la sintaxis HTML , pero el problema empieza cuando tenemos un elemento llamado BASE, el cual nos permite cambiar la dirección principal para cuando utilice una página con ruta relativa tome la base y complete el URL (jeje, no se me hagan bolas :-P ), algo como sigue:

Tenemos nuestra página www.oviedo.mx y cuando mandamos llamar la página index.php el navegador automaticamente agrega www.oviedo.mx ya que es el sitio web que estamos visitando en este momento, pero que ta si no queremos que al picarle en cualquier liga de la página nos mande llamar a http://www.oviedo.mx sino que queremos que llame http://start.oviedo.mx, haaa!! pues una solución es utilizar y listo!!! todas las páginas mandaran llamar los links como si fueran de la dirección BASE…, un poco mas claro no???

Entonces si mezclamos NAME con BASE tenemos un problemon!!, ya que si estamos en la página
index.php/pages/1.html y mandamos llamar con NAME #abajo deberia quedar index.php/pages/1.html#abajo hasta aquí todo bien!! si no fuera porque nos queda index.php#abajo ya que en nuestra etiqueta BASE tenemos y ahi es donde empiezan los problemas!!, ahora bien la solución a todo esto es utilizar JavaScript ;-)

El algoritmo que utilizaremos es:
* Obtener la cadena del URL actual
* Contar con el valor de NAME a el que queremos dirigirnos en la página
* Buscar el cualquier valor NAME en la cadena URL, osease que comience con gato #
* Si se encontro el valor NAME se debe eliminar y dejar la cadena URL sin esa información
* Concatenar el nuevo valor NAME a la URL ya parseada
* Mandar llamar la nueva página web.

<br /> function hrefbase(tagname){<br /> var newText = "";<br /> searchTerm = "#";<br /> var i = -1;<br /> var bodyText = location.href;<br /> i = bodyText.indexOf(searchTerm, i+1);<br /> if (i &lt;0) {<br /> newText = bodyText;<br /> } else {<br /> newText = bodyText.substring(0, i);<br /> }<br /> location.href=''+newText+searchTerm+tagname;<br /> }<br /> 

Solo se tiene que mandar llamar la función hrefbase con el parametro que es la etiqueta NAME a la cual queremos ir y listo!!, una forma practica es mediante el evento ONCLICK:

</p>
<div ONCLICK="javascript:hrefbase('pagina_abajo');">Ir al pie de página</div>
<p>

Despues pueden utilizar alguna hoja de estilo CSS para darle un formato más adecuado, ya se poniendo una linea de subrayado ( text-decoration: underline; ), o la manita del cursor como si fuera un enlace ( cursor: pointer; ).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *