Abrindo corretamente links em nova janela

por Jan Seidl em 23 de abril de 2009

A boa prática nos conduz a abrir links em nova janela apenas quando são páginas de sites externos e desde que o atributo target="_blank" dos links a morreram (se você não sabia eu lamento muitíssimo em contar-lhe), o único caminho que nos resta é o JavaScript.

O evento click no link não pode mais ser chamado pelo atributo onclick das tags a porque todos os atributos on* morreram também (Eu sei, é um massacre!) o que confirma o uso do JavaScript para atribuir o evento (observe/attach).

Usarei os seletores JQuery para pegar o que precisamos com uma pitadinha de REGEX.

Todos os links externos
[sourcecode language="javascript"]
$(document).ready(function() {
$(”a[href^='http://']“).click(function(ev){
ev.preventDefault();
window.open(this.href);
});
});
[/sourcecode]

Todos os links dentro da div com o atributo id ‘#div_id’
[sourcecode language="javascript"]
$(document).ready(function() {
$(’div#id_div a’).bind(’click’,function(ev) {
ev.preventDefault();
window.open(this.href);
}
);
});
[/sourcecode]

NOTA: Sempre encapsulo observadores de evento (também conhecidos como event listeners, event attachment ou event binding) na instrução $(document).ready() para garantir que o elemento a ser observado já esteja presente na memória quando o observador for anexado a ele.

NOTA: O uso do ev.preventDefault() ao invés de return false para seguir o padrão do JQuery. Apenas uma boa prática.

NOTA: ev é apenas um nome da váriavel. Você pode escolher o nome que melhor convir.

NOTA: Quando digo “corretamente” digo “seguindo os standards”. Não quero ofender a ideologia nem religião de nenhum desenvolvedor.

Alguem com uma ideia “correta” diferente?

Adicionar esta notícia no Linkk

Deixe sua opinião

Nota: Seu endereço de email nunca será publicado.

Acompanhe os comentários por RSS