Generando algo similar al target="_blank" para enlaces externos

cvander · #1 (**permalink**) 28/03/2005, 22:58

Me ha sucedido en un sitio con bastante contenido que se han incluido muchísmos enlaces externos en los contenidos sin ningún target definido. Ahora estoy buscando una alternativa para que se detecten los enlaces que no pertenecen al sitio y se les asigne este atributo.

Encontré este código por allí:

Código:

function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("href") == "http://www.algundominio.*")
     anchor.target = "_blank";
 }
}
window.onload = externalLinks;

Y donde necesito ayuda es en la modificación del mismo para que detecte todos los enlaces que sean parte de x dominio o que tengan el path interno (href = "/algundirectorio/").

Alguna forma de asignarle esa condición? Desconozco de expresiones regulares o algo similar en javascript, así que cualquier guía será agradecida.

Por cierto que este código lo descubrí leyendo el blog de kadazuro donde destaca la curiosidad que el atributo target="_blank" ya no es válido en XHTML estricto (únicamente permanece en el transicional) y como explican en Sitepoint (y de donde tomé el código) hará falta algo de javascript para implementarlo si queremos estar en regla.

caricatos · #2 (**permalink**) 29/03/2005, 00:55

Hola cvander:

Justamente, en las FAQs hay alguna forma de que los enlaces se hagan en una ventana emergente: http://www.forosdelweb.com/f13/faqs-javascript-105325-post693040/
Y también hubo una discusión interesante sobre la misma: http://www.forosdelweb.com/f13/hay-que-rectificar-las-faqs-238052/
Puse en la misma FAQ una forma para que pasara la validación estricta... Aunque tal vez solo baste poner:
<a href="..." onclick="this.target = '_blank'" >

Para el control de la ruta, se puede usar el método de las cadenas indexOf..

if (anchor.getAttribute("href").indexOf("/path/") != -1)
anchor.target = "_blank";

La verdad es que yo tampoco manejo bien las expresiones regulares, pero sería más o menos:
var path = /path/;
if (path.test(anchor.href))...
Pero eso mejor será que lo diga alguien que maneje mejor las expresiones regulares.

Saludos

KarlanKas · #3 (**permalink**) 29/03/2005, 03:16

Y algo así?

Código PHP:

  <html> 
<head> 
    <title>Untitled</title> 
    <script> 
        dominio="forosdelweb.com"; 
        function inicio(){ 
            for(a=0;a<document.links.length;a++){ 
                enlace=document.links[a]; 
                if(enlace.href.indexOf("http://")==0 && enlace.href.indexOf(dominio)==-1){ 
                    enlace.target="_blank"; 
                } 
            } 
        } 
    </script> 
</head> 
 
<body onload="inicio()"> 
    <a href="http://forosdelweb.com">Foros del Web</a><br> 
    <a href="http://www.forosdelweb.com">Otra vez Foros del Web</a><br> 
    <a href="index.php">Enlace a una página</a><br> 
    <a href="http://karlankas.net">Visitar KarlanKas.net</a><br> 
 
</body> 
</html>

Lo bueno de esto es que funciona con navegadores más antiguos. Y creo que funcionaría tal y como pides...

Y busca antes de preguntaaar, cvander...

KarlanKas · #4 (**permalink**) 29/03/2005, 03:57

Para no usar el maldito target="_blank":

Código PHP:

  <html> 
<head> 
    <title>Untitled</title> 
    <script> 
        dominio="forosdelweb.com"; 
        function inicio(){ 
            for(a=0;a<document.links.length;a++){ 
                enlace=document.links[a]; 
                if(enlace.href.indexOf("http://")==0 && enlace.href.indexOf(dominio)==-1){ 
                    enlace.onclick=function pepe(){window.open(this.href);return false;} 
                } 
            } 
        } 
    </script> 
</head> 
 
<body onload="inicio()"> 
 
    <a href="http://forosdelweb.com">Foros del Web</a><br> 
    <a href="http://www.forosdelweb.com">Otra vez Foros del Web</a><br> 
    <a href="index.php">Enlace a una página</a><br> 
    <a href="http://karlankas.net">Visitar KarlanKas.net</a><br> 
    <a href="http://maestrosdelweb.com">Visitar maestros del web</a><br> 
 
</body> 
</html>

Un saludo a los dos!

JavierB · #5 (**permalink**) 29/03/2005, 04:18

Hola a todos.

Reduciendo código...

Código PHP:

      <script> 
        dominio="forosdelweb.com"; 
        function inicio(){ 
            for(a=0;enlace=document.links[a];a++) 
                if(enlace.href.indexOf("http://")==0 && enlace.href.indexOf(dominio)==-1) 
                    enlace.onclick=function() {window.open(this.href);return false;} 
        } 
    </script>

... código reducido

Saludos,

KarlanKas · #6 (**permalink**) 29/03/2005, 04:34

Hale!

Que inteligente lo de meter la igualdad en el for... claro! cuando no exista enlace se detiene el for...

Me ha gustado mucho, javier! Aunque me da pena que me quites el pepe. Ya sabes que siempre meto un pepe en mis códigos!

Un saludo!

JavierB · #7 (**permalink**) 29/03/2005, 06:50

Hola KarlanKas

Lo de meter la igualdad en el for me lo enseño un miembro del foro. Siento no recordar el nombre, porque la verdad es que me gusta mucho el método.

Si quieres, también podrías poner:

for(a=0;pepe=document.links[a];a++)

Saludos,

cvander · #8 (**permalink**) 29/03/2005, 07:34

Muchas gracias por la ayuda :)

Y prometo haber utilizado el buscador antes, pero al menos en los primeros resultados llegue a mensajes que nada que ver, así que por ello me animé a postear.

Aunque eso si, veo que tengo que determe un rato a revisar todas las FAQs pues hay mucho por alli que aprender.

caricatos · #9 (**permalink**) 29/03/2005, 13:26

¡Bueno, bueno, bueno...!

Lo que no se sabe es cuál de las respuestas es la buena...

cvander: ¡verás!, tanto JavierB como yo, tenemos unas armas que marcamos cuando "damos en el blanco" (la mía es un Winchester virtual)... y no me extrañaría que KarlanKas tuviera una sofisticada "laser" (o mejor)

Sobre las FAQs, no te olvides que hay gente dispuesta a trabajar en la mejora de las FaqsDelWeb...

Saludos

KarlanKas · #10 (**permalink**) 29/03/2005, 13:32

En realidad, querido caricatos, lo que yo tengo es una escopeta de perdigones: poca precisión pero dificil será que un perdigón no dé en el blanco. Compararme con vosotros es como si compararais un carnicero con un par de cirujanos... vuestra precisión es mucho mayor!

Y, JavierB, pepe, por fuerza, tiene que ser o una function o un campo de formulario...

caricatos · #11 (**permalink**) 29/03/2005, 18:04

Hola otra vez:

Para evitar el "odioso target='blank'" estás usando el "odioso return false".

Mi opinión es que no se debe usar tanto en los formularios como en los enlaces salvo que se quiera "cancelar ese enlace/submit" (R que R)

Una prueba:

Código:

<html><head><title>Prueba</title>
<script language="JavaScript">
 var enlaces = document.links;
 var path = /\/dato\//;
function abreteSesamo() {
 open(this.href);
 return false;
}
function pepito(){
 for (var i = 0; i < enlaces.length; i ++)
  enlaces[i].onclick = (path.test(enlaces[i].href)) ? "" : abreteSesamo;
}
window.onload = pepito;
</script>
</head>

<body>
<a href="pepe.html">prueba</a><br/>
<a href="/dato/pepe.html">prueba</a>
</body>
</html>

Usa expresiones regulares (el ejemplo anterior estaba bien encaminado)... y creo que la sintaxis es algo más simplificada... aunque si el enlace tuviera una función asociada al evento onclick nos encontraríamos con un problema y tendríamos que complicarnos con addEventListener o attachEvent

abreteSesamo podría tener tan solo un "this.target = '_blank'" o aún mejor, asociarlo al target con el odioso "_blank"

Bueno... sé que estoy liando algo sencillo

Voy a seguir con las celebraciones

KarlanKas · #12 (**permalink**) 30/03/2005, 02:00

Está muy bien el código, caricatos. Tal vez arreglas el problema que dices poniendo:

enlaces[i].onclick += (path.test(enlaces[i].href)) ? "" : abreteSesamo;

Hablando en serio, no sería más sencillo simplemente comprobar si el href comienza por http:// y no es del dominio del site? Algo así:

enlaces[i].onclick = (enlaces[i].indexOf("http://")==0 && enlaces[i].indexOf(location.hostname)==-1)? "" : abreteSesamo;

Supongo que con expresiones regulares se hace más potente. Pero entiendo que para lo que quiere cvander no sería necesario... creo!

dr. attach · #13 (**permalink**) 09/01/2008, 10:11

Buen aporte, me sirvió para validar :D