viernes, 16 de julio de 2010

abrir enlaces externos en nuevas ventanas

new_windowEsta funcionalidad es especialmente útil cuando ya tenemos un web site armado… y el site tiene referencias a web sites externos, pero esos links no tienen el atributo _blank para que abran en nuevas ventanas... y obviamente ir de enlace en enlace para ponerle target=”_blank” es una tarea tediosa.

La idea de cargar enlaces que provienen desde sitios externos en nuevas ventanas surge básicamente porque no deseamos que el usuario abandone nuestro site…

Para resolver este caso vamos a usar la afamada librería javascript llamada JQuery.
Empecemos:
Creamos un proyecto asp.net y añadimos tres páginas aspx: webform0.aspx, webform1.aspx, webform2.aspx
Luego, en webform0.aspx pegamos este código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cargar enlaces externos en nuevas ventanas</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function () {
$("a[@href^='http']").not("[href*='localhost']").attr('target', '_blank');
}); 

</script>
</head>
<body>
<form id="form1" runat="server">
<p>
<asp:HyperLink ID="HyperLink1" NavigateUrl="http://www.google.com" runat="server">navegar a Google</asp:HyperLink>
</p>
<p>
<asp:HyperLink ID="HyperLink2" NavigateUrl="WebForm1.aspx" runat="server">navegar a página interna con ruta parcial</asp:HyperLink>
</p>
<p>
<asp:HyperLink ID="HyperLink3" NavigateUrl="http://localhost/Samples35_VB/WebForm2.aspx"
runat="server">navegar a página interna con ruta absoluta</asp:HyperLink>
</p>

</form>
</body>
</html>

Les explico:
mediante esta línea: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js estoy llamando la librería jquery.
luego, el script:
$(document).ready(function () { $("a[@href^='http']").not("[href*='localhost']").attr('target', '_blank'); });

lo que hace es chequear cuando hacemos click en un elemento <a>, y si detecta que el enlace posee un href que no pertenece al dominio desde el cual ejecutamos la aplicación… abre el enlace en una nueva ventana.

Así de simple.

Muchos dirán: pero que haga click derecho y elija “abrir en nueva pestaña”. Sí pues, pero no siempre el usuario está acostumbrado ni atento a hacer eso.

Otros dirán: pero si se quiere ir del web site que se vaya pues, además si abres nuevas ventanas atentas contra los estándares y esas cosas. Sí pues, tú decides si lo usas.

Espero que les sea de utilidad ;)

No hay comentarios.: