 |
Apertura de enlace en la misma página o en otra pestaña
Lo implementaremos de tal manera que el visitante pueda abrir cada enlace de la página en la misma ventana o en una nueva.
Esta utilidad hace uso del concepto de desactivación del evento por defecto de un elemento HTML que habíamos visto anteriormente.
Esta funcionalidad debe ser implementada con javascript.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var enlaces=document.getElementsByTagName('a');
for(f=0;f<enlaces.length;f++)
{
enlaces[f].addEventListener('click',enlaceSeleccionado,false);
}
}
function enlaceSeleccionado(e)
{
var check=document.getElementById('check1');
if (check.checked)
{
var enlace;
enlace=e.target;
e.preventDefault();
window.open(enlace.getAttribute('href'));
}
}
</script>
</head>
<body>
Apertura de enlaces en otra página?<input type="checkbox" id="check1"><br>
<ul>
<li><a href="http://www.lanacion.com.ar">La Nación</A></li>
<li><a href="http://www.clarin.com.ar">El Clarín</A></li>
<li><a href="http://www.lavoz.com.ar">La Voz</a></li>
</ul>
</body>
</html>
El código javascript es:
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var enlaces=document.getElementsByTagName('a');
for(f=0;f<enlaces.length;f++)
{
enlaces[f].addEventListener('click',enlaceSeleccionado,false);
}
}
function enlaceSeleccionado(e)
{
var check=document.getElementById('check1');
if (check.checked)
{
var enlace;
enlace=e.target;
e.preventDefault();
window.open(enlace.getAttribute('href'));
}
}
El archivo html no tiene nada nuevo. No agregamos ninguna propiedad especial a la marca de tipo <a>.Lo más interesante se encuentra en el archivo js, aquí es donde dependiendo del estado del checkbox procedemos a la apertura del sitio en otra página o en la misma.
En la función inicializar eventos adjuntamos la función a dispararse con el evento click en un enlace:
function inicializarEventos()
{
var enlaces=document.getElementsByTagName('a');
for(f=0;f<enlaces.length;f++)
{
addEvent(enlaces[f],'click',enlaceSeleccionado,false);
}
}
La función enlaceSeleccionado se ejecuta cada vez que el operador presiona con el mouse un enlace de la página. Lo primero que hacemos es verificar si el checkbox está seleccionado, en caso negativo no hacemos nada por lo que el sitio se carga en la misma página.
Si el checkbox está seleccionado obtenemos la referencia del objeto que emitió el evento, desactivamos el evento por defecto para dicho enlace y abrimos la ventana mediante el método open del objeto window:
function enlaceSeleccionado(e)
{
var check=document.getElementById('check1');
if (check.checked)
{
var enlace;
enlace=e.target;
e.preventDefault();
window.open(enlace.getAttribute('href'));
}
}