Como abrir enlaces en ventana nueva sin usar target

El atributo target para los enlaces no está permitido en los doctype estrictos. Puesto que al crear un documento HTML siempre deberíamos usar doctype estrictos, si usáramos el atributo target invalidaríamos el documento y en consecuencia éste dejaría de ser accesible.

En general abrir nuevas ventanas del navegador no es recomendable ya que puede ser un estorbo para el usuario. Para los casos donde abrir una nueva ventana sea aceptable, es mejor usar técnicas basadas en JavaScript en lugar de invalidar el documento usando target.

En el siguiente ejemplo, mediante una combinación de JavaScript y CSS abriríamos en ventana nueva todos los enlaces señalados con class=external. Además de ser compatible con los doctype estrictos esta técnica permite que los enlaces sigan funcionando incluso si el navegador del usuario no soporta JavaScript.

Ejemplo de la aplicación de este método


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ES">
<head>

<script type="text/javascript">

// Para abrir enlaces en ventana nueva sin usar target _blank

function abrirTargetBlank(e) {
   
   var className = 'external';
   
   if (!e) var e = window.event;
   var clickedObj = e.target ? e.target : e.srcElement;
   
   if(clickedObj.nodeName == 'A' )
    {
      r=new RegExp("(^| )"+className+"($| )");
      if(r.test(clickedObj.className)){
         window.open(clickedObj.href);
         return false;
      }
    }
}
   
document.onclick = abrirTargetBlank;

</script>
</head>
<body>

<a href=”http://x.bonell.info” class=”external”>x.bonell.info</a>

</body>
</html>



Los comentarios para esta entrada ya se han cerrado. Gracias por haber participado.


Más entradas en x.bonell.info