Modificar los enlaces con JavaScript

29/Feb/2008 JavaScript , , 8 Comentarios

Los enlaces también están dentro del modelo DOM de una página. Es por ello que mediante lenguaje Javascript podremos modificar sus atributos: el contendio, el target asignado, así como la URL a la que enlazan.

Mediante este ejemplo vamos a componer un formulario que nos permita crearnos nuestro enlace personalizado. De tal manera que elijamos el texto del enlace, la URL a la cual va a acceder, si se abrirá en una nueva ventana, en un frame o en la misma,... es decir, rellenaremos datos para poder modificar todos los valores de los atributos del enlace.

Lo primero será crear nuestro formulario:

  1. <form action="#">
  2. <label for="enlace">URL: </label>
  3. <input type="text" id="enlace"><br>
  4. <label for="texto">Texto: </label>
  5. <input type="text" id="texto"><br>
  6. <label for="destino">Target: </label>
  7. <select id="destino">
  8. <option value="_blank">Nueva Ventana</option>
  9. <option value="_self">Misma ventana</option>
  10. <option value="_parent">Ventana Padre</option>
  11. <option value="_top">Top</option>
  12. </select><br>
  13. </form>

Como cosa particular vemos que las opciones del destino del enlace se las presentamos mediante un combo. Las opciones son:

  • _blank, para abrir una nueva ventana.
  • _self, para abrirlo en la misma ventana.
  • _parent, abre en la ventana padre.
  • _top, abre eliminando todos los frames que pueda haber en la ventana.

Cuando se envíe el formulario obtenemos todos los valores para pasárselos a un método lenguaje Javascript que llamaremos modificar:

  1. <button onClick="modificar(getElementById('enlace').value, getElementById('texto').value, getElementById('destino').value);">Cambiar enlace</button>

Además tendremos un enlace con valores por defecto dentro de nuestra página. Este será el enlace que vayamos modificando.

  1. <a href="http://www.google.com" target="_blank" title="Google" id="mienlace">Google</a>

Ahora pasamos a codificar el método lenguaje Javascript. Lo primero que tenemos que hacer es acceder al enlace. Para ello nos apoyamos en el método getElementByID, al cual le pasamos el ID que le hayamos dado al enlace de nuestra página.

Los atributos que podemos modificar del elemento son los siguientes:

  • innerHTML, nos permite modificar el texto del enlace.
  • href, modifica la URL de destino del enlace.
  • target, representa el destino del enlace.

El código nos quedaría de la siguiente forma:

  1.  
  2. function modificar(url,texto,destino){
  3. document.getElementById("mienlace").innerHTML = texto;
  4. document.getElementById("mienlace").href = url;
  5. document.getElementById("mienlace").target = destino;
  6. }
  7.  

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

8 comentarios en “Modificar los enlaces con JavaScript”

Víctor Cuervo

Rosa Meltroso

Vte a la chingada

Víctor Cuervo

angel

Maravilloso!!!!

Ahora mi pregunta es …

con varios enlaces en la misma pagina? Que seria ir nombrando el id y hacer script varias veces?

Víctor Cuervo

Víctor Cuervo

@Poncho,

Ya nos contarás tu experiencia o si necesitas alguna ayuda. Y recuerda que siempre tienes disponible el foro para cualquier duda. http://www.dudasprogramacion.com

Víctor Cuervo

Poncho

@Victor Cuervo

Gracias por aclararme la duda entonces utilizare uno de los que mencionas.

Víctor Cuervo

Víctor Cuervo

@Poncho,

Con Javascript no puedes renombrar un fichero. Necesitarías un lenguaje de servidor: php, java,…

Víctor Cuervo

Poncho

Hola me sirvio mucho el script pero como puedo hacer para que dichos cambios sean afectados en los archivos.

Ejemplo

Tengo un archivo llamado hola.xlsx

y lo quiero cambiar a adios.xlsx

y que se quede guardado con el ultimo nombre con el que lo llame.

Ya que el script si los cambia pero como temporal si cierro la pagina no se guarda el cambio.

Víctor Cuervo

israel

hola mira ayudame por favor

los que quiero es cambiar un url a un java scrip

el contenido es feed rss

Víctor Cuervo

xd

Bueno la verdad os he de agradecer, me has ayudado. Gracias camarada.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*