Como modificar el destino de todos los enlaces de una web con javascript

Como modificar el destino de todos los enlaces de una web con javascript

Print Friendly, PDF & Email
Como modificar el destino de todos los enlaces de una web con javascript
Valora esta entrada
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.

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>
Ver solución (Haz clic)

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!

Entradas relacionadas:

Ejercicio – Generación de una fecha personalizada mediante javascript
- 64
Ejercicio javascript dónde se trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
Ejercicio – ¿Estamos en fin de semana?
- 80
Ejercicio dónde se resuelve un simple ejercicio mediante el uso de getDay() y se compara un switch y un if. Incluye solución.
Ejercicio – Generación de un dado de 6 caras con javascript
- 81
Ejercicio con solución dónde se genera un dado de 6 caras y se tira el dado 1000 veces para comprobar cuantas veces ha salido cada tirada.
Instrucciones básicas para familiarizarse con javascript
- 377
El javascript es un lenguaje que se olvida a una velocidad de vértigo si no se practica. Es importante tener unos buenos apuntes 😉 Hoy presento instrucciones básicas que sirven para empezar con scrip...
Funciones Javascript: declaración, uso y utilidad en programación
- 452
Una función es una estructura de código que ejecuta y transforma unos inputs de entrada en un output de salida en forma de dato o acción. Hemos trabajado con funciones toda nuestra vida. Las aprendimo...
Ejercicio – Programación de una ventana infinita cansina en JS
- 71
Ejercicio que pregunta iterativamente el color del caballo blanco de santiago hasta que se resuelve. Incluye solución.
Ejercicio – Sumas con letras
- 102
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
Ejercicio JS: Uso de length y acceso a las posiciones de un array.
- 96
En este ejercicio se practica el método length y se usa para jugar con los arrays y acceder al primer elemento y al último de un vector.
Validación de campos try catch finally en Javascript puro
- 335
Explicación teórica y ejemplo práctico del uso de las instrucciones try + throw, catch y finally en javascript. Utilizamos esta estructura para validar un campo en un formulario. Sin embargo se puede ...
Crear, modificar, eliminar y detectar cookies con Javascript
- 797
En esta entrada explicamos los tipos de cookies que existen y mostramos una biblioteca de funciones que nos permite crear, modificar, eliminar y detectar cookies con javscript.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.