Si queremos que nuestros enlaces se abran en una ventana nueva podemos utilizar el atributo target para las etiquetas <a>. Sin embargo, si utilizamos un esquema XHTML Strict este atributo no es válido para ninguna etiqueta. El motivo es separar la presentación del contenido del comportamiento, y el atributo target modifica el comportamiento.

Una alternativa es utilizar Javascript para conseguir el mismo efecto. Si Javascript no está disponible simplemente se abrirá en la misma ventana. Con Javascript, además, podemos conseguir que la ventana se abra en segundo plano, aunque sólo en algunos navegadores, como por ejemplo Chromium. En Firefox es necesario modificar un parámetro que viene desactivado por defecto.

Para activarlo en Firefox, vamos a Herramientas > Opciones. En Contenido debe estar activado Habilitar Javascript, y en opciones Avanzadas de Javascript se debe marcar "Abrir o cerrar ventanas".

Para distinguir los enlaces que queramos que se abran en segundo plano de los que no, por ejemplo enlaces internos, tenemos varias alternativas. Podemos utilizar el atributo rel="external" o asignarles una clase, y luego utilizar un selector jQuery para seleccionarlos. Algo así:

$('a[class="targetclass"]')

Otra forma es aplicar un filtro para seleccionar sólo los enlaces cuya dirección no contenga nuestro dominio.

$('a').filter(function() {
    return this.hostname &&
        this.hostname !== location.hostname &&
        this.hostname.indexOf('.'+location.hostname) == -1;
})

Este filtro dejaría fuera enlaces cuya ruta contenga nuestro dominio, algo como http://example.com/must/see/www.mydomain.com, aunque lo peor que sucedería es que el enlace se abriría en la misma ventana.

Una vez que hemos seleccionado los enlaces que queremos, para abrir el enlace en una ventana en segundo plano, obligamos a que el foco se pase a la ventana padre:

window.open(url);
window.focus();

Otra forma es que la ventana hija pierda el foco:

var win = window.open(url);
win.blur();

Todo junto, utilizando la función $ de jQuery, que permite ejecutar el código cuando la página haya cargado:

$(function() {
$('a').filter(function() {
        return this.hostname &&
            this.hostname !== location.hostname &&
            this.hostname.indexOf('.'+location.hostname) == -1;
      }).click(function() {
        var win = window.open(this.href);
        win.blur();
        window.focus();
        return false;
    });
});

Entradas relacionadas


Published

Category

dev

Tags

Contacto