Recomendado

Las mejores ofertas del Black Friday en Hormiguitas Ahorradoras

miércoles, 24 de marzo de 2021

Abrir enlaces externos en una nueva ventana con javascript

Hoy vamos a ver como abrir todos los enlaces externos en una nueva ventana utilizando javascript. lo primero que se nos viene a la cabeza, pues que fácil, con target="_blank" en el enlace y arreglado, cierto esa es la mejor manera, pero no siempre podemos acceder al código del enlace para poder poner ese target="_blank", por ejemplo en los comentarios de los visitantes, ahí nos pueden dejar enlaces a sus páginas o páginas de referencia al comentario y es ahí donde queremos que no se noa habra en nuestra página, sinó en una pestaña nueva y es ahí donde vamos a utilizar código javascript para poder acceder a esos enlaces y modificarles el target="_parent" por target="_blank" , comenzamos viendo el código.

Abrir enlaces externos en una nueva ventana



Lo primero decir que para que funcione bien este código, lo debemos poner lo mas cerca del cierre de etiqueta </body> y luego buscaremos todos los elementos de nuestra web que tengan la etiqueta <a> y utilizaremos el siguiente código:

  1.  var e = document.getElementsByTagName("a");
Ahora una vez localizados los enlaces <a> , es ahora cuando le decimos que compruebe si ese enlace pertenece a nuestro dominio, lo abra en esta misma ventana, si no, lo abra en  ventana nueva, lo haremos con el siguiente código:

  1.   if (e.href.indexOf("nuestrodominio.algo") !== -1) {
  2.           //creado por https://joason.com
  3.  e.setAttribute("target","_parent");                 
  4.                  }else{
  5.                  e.setAttribute("target","_blank");
  6.                   }
Cambiaremos "nuestrdominio.algo" por el dominio real que queramos comprobar, podéis ver que en cuanto encuentra un enlace que cumple la condicional le añade el atributo  target="_parent" y si no la cumple le añade target="_blank" .
El código funciona, perfecto ya lo tenemos, pero si te das cuenta sólo cambia el primer enlace que encuentra, lo que quiere decir, que si tenemos en esa página mas de uno este código no nos valdrá, qué tenemos que hacer, sencillo, tendremos que meter este código dentro de un for para decirle que no pare de modificar enlaces mientras haya estos, el código seria:

  1. for(var i=0;i<e.length;i++){
  2. var l = e[i];
  3. }
En el for creamos la variable i con un valor de 0, y le estamos diciendo que si i es menor que el numero total de e (que es como hemos llamado a los enlaces) la variable i la incremente en +1 y ejecute el código insertado en el for, esto se repetirá hasta que i deje de ser menor que el número total de e .
Nos quedaría el código final de la siguiente manera:

  1.  var e = document.getElementsByTagName("a");
  2.      // creado por https://joason.com 
  3. for(var i=0;i<e.length;i++){
  4. var l = e[i];
  5.              if (l.href.indexOf("nuestrodominio.algo") !== -1) {
  6.  l.setAttribute("target","_parent");                 
  7.                  }else{
  8.                  l.setAttribute("target","_blank");
  9.                   }
  10. }
Y ahora sí, podéis comprobar que ahora si que cambia todos los atributos target de todos los enlaces que hay en nuestra web. Recordar cambiar "nuestrdominio.algo" por el dominio real que queramos comprobar.

Bueno, pues eso es todo, espero que os sea útil y cualquier duda, comentar.


Un saludo.

No hay comentarios:

Publicar un comentario