13 Nov Como modificar el destino de todos los enlaces de una web con javascript
En algunas ocasiones sucede que accedes a una página web y aparentemente todo es normal. Sin embargo al clicar sobre cualquier enlace resulta que todos redirigen a alguna otra de interés del hacker.
Se puede hacer con un sencillo script como el que veremos en este ejercicio.
En este caso se resolverá mediante javascript puro. Sin embargo cabe decir que el caso típico es hacerlo con jQuery, reduciéndose a 1-2 líneas.
Te será de utilidad repasar los siguientes conceptos.
- Obtener una lista con todos los nodos del documento web de un determinado tipo.
- Declarar eventos al cargarse el documento web. Diferencia entre usar () y no usarlo.
- Modificar el valor de los atributos de una etiqueta html mediante javascript.
Vayamos al ejercicio.
Enunciado
El siguiente código html representa un menú de navegación en una página web.
Escribe un script que modifique el comportamiento esperado de los enlaces para que cuando se carguen el usuario sea enviado en una pestaña nueva a «https://francescricart.com/tutorial-javascript».
Haz además que el usuario reciba un texto emergente con el texto «susto».
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Modificar enlaces">
<meta name="author" content="Francesc Ricart">
<title>Ejercicio js - modificar todos los enlaces de una página al cargar una web</title>
</head>
<body>
<ul>
<li><a href="#quienesSomos">Quiénes somos</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#productos">Productos</a></li>
<li><a href="#preguntas frecuentes">Preguntas frecuentes</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
<script>
//solución del ejercicio
</script>
</body>
</html>Solución del ejercicio
Para llamar a todos los nodos en esta solución se usa document.getElementsByTagName(«a»). Que devuelve información de tipo lista.
El primer nodo (enlace) será el que ocupa la posición 0 y el último .length-1
Por consiguiente mediante un for podemos recorrer todos los nodos e ir modificando uno por uno los atributos.
A modo de ejemplo se ha usado tanto setAttribute() como directamente .href =
Fijaros también que en window.onload = init hemos prescindido del paréntesis. Esto es porqué no queremos que se ejecute inmediatamente la función sino una vez se haya cargado toda la web (hay que esperar).
Lo mismo sucede para la función susto. No queremos que se ejecute inmediatamente sino sólo cuando se active el enlace.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Modificar enlaces">
<meta name="author" content="Francesc Ricart">
<title>Ejercicio js - modificar todos los enlaces de una página al cargar una web</title>
</head>
<body>
<ul>
<li><a href="#quienesSomos">Quiénes somos</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#productos">Productos</a></li>
<li><a href="#preguntas frecuentes">Preguntas frecuentes</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
<script>
window.onload = init;
function init(){
var enlaces = document.getElementsByTagName("a");
for(i=0;i<enlaces.length;i++){
enlaces[i].href="http://francescricart.com/tutorial-javascript";
enlaces[i].setAttribute("target","_blank");
enlaces[i].onclick = susto;
}}
function susto(){window.alert("susto")};
</script>
</body>
</html>¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Repasamos las distintas formas que existen de asociar eventos javascript a etiquetas html. Ya sea por acoplamiento directo o como evento semántico. Comparamos también con addEventListener()
Practica createElement(), appendChild(), insertBefore() y removeChild() con un documento web lleno de párrafos. Incluye solución.
Ejercicio javascript en que se escribe una función que escribe la tabla de multiplicar de un número indicado. Incluye solución.
El término escapar un carácter en Javascript sin duda da un poquito de yuyu. En realidad una palabra poco atractiva para algo muy práctico. El concepto es muy similar al de escapar un carácter en HTML...
Ejercicio javascript resuelto en el que see plantea un script para cargar una imagen aleatoria cada vez que se clica un botón.
Ejercicio pensada para personas que empiezan a aprender javascript. Dibuja una escalera con javascript y css. Incluye solución.
No hay comentarios