Abrir links externos em nova janela com jQuery
Postado por: Pedro Rogério emRecentemente, Trevor Davis postou em seu site uma solução para abrir links externos em uma nova janela com jQuery, que consiste no seguinte:
$(document).ready(function(){
$("a[@href^='http']“).attr(’target’,'_blank’);
});
O que esse script faz é pegar todos os links da página que iniciem com http e com isso o JavaScript adiciona o atributo target com valor _blank. É uma solução muito interessante, mas a meu ver, eu utilizaria uma solução mais semântica:
$(document).ready(function(){
$("a[@rel=external]").attr('target','_blank');
});
Minha solução pega todos os links da página que contenham o atributo rel=”external” e faça com que os mesmos abram em uma outra aba/janela. A meu ver, bem mais semântico. E você, tem alguma sugestão?
Update: A partir da versão 1.3 do jQuery, deve ser eliminado o @ do código, ficando dessa forma:
$(document).ready(function(){
$("a[rel=external]").attr('target','_blank');
});
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Já tentei utilizar o jQuery e gostei bastante.
Seria uma ótima solução para quem gosta de abrir links em outras janelas automaticamente.
Ah! Acho que tem um erro no último parágrafo.
“Minha solução peda todos os links da página que contenham o atributo rel=”external” e faça com que os mesmos abram em uma mesma janela. A meu ver, bem mais semântico. E você, tem alguma sugestão?”
Não seria em uma outra aba/janela?
Abraço
E lembrando de colocar um indicador que aquele é um link que direciona para outra página, como um ícone de setinha ou algo do gênero.
Abraços!
Estou a desenvolver um artigo parecido com o que falaste mas sem usar jQuery.
Já testaste a ver se funciona quando está declarado no link rel=”eternal nofollow” ou rel=”me external” ou outras combinações possíveis?
Funcionou?
Sua solução exige que seja adicionado um atributo extra para cada link externo na página, sem falar que não existe o valor external para o atributo rel, como você pode ver em http://www.w3schools.com/tags/tag_a.asp . Se é para fazer isso, use logo o target=”_blank” de uma vez e livre-se do javascript. Retirá-lo da especificação foi uma estupidez da w3c mesmo.
@Gustavo,
Corrigido, nem havia reparado isso, fiz o post correndo!!!
@Mario,
Pode ser que dessa forma funcione:
$(document).ready(function(){
$(“a[@rel~=external]“).attr(’target’,’_blank’);
});
Não testei, mas alí ele procura os elementos a que pelo menos contenham o atributo rel=”external” independente de possuir outros atributos. Pode ser que lhe ajude.
@Leonardo,
Sinceramente eu acho uma besteira colocar no link uma opção para o mesmo abrir em uma janela, essa é uma opnião minha, pois quem decide se o link abre em uma nova janela ou não é o usuário. Agora, se você tranalha com XHTML Strict deve saber que não é permitido o uso de target=”_blank”, tendo que recorrer então a uso de scripts para que façam esse tipo de trabalho sujo. Eu só faço o uso disso quando já esgotei minhas tentativas de tentar explicar tudo isso a meu chefe, mas o mesmo não entende bulhufas.
Referente ao atributo rel=”external”, ele fará parte das futuras especificações do HTML.
Eu faria assim, uma vez que meu xhtml strick não valida com a propriedade target: (mas acho que já que é includo pelo javascript e não deixa de ser uma gambiarrinha, acho que o target se encaixa melhor mesmo)
$(document).ready(function(){
$(“a[@rel=external]“).click(function(){
window.open(this.href);
return false;
})
});
Abraço!
@Guilherme,
É inválido somente se você inserir target=”_blank” diretamente no HTML, mas como ele é inserido via JavaScript, ou seja, não está fisicamente alí no HTML, valida normalmente!!!!
Antes de mais nada: Agradeço pelo conteúdo do blog, estou navegando aqui e adorando.
Em caso de XHTML eu apenas uso:
$(document).ready(function(){ $(“a[@rel=external]“).click(function(){ this.target=”_blank” }); });
Modificando a tag apenas se ela for clicada.
Abraços e parabéns pelo blog ^^
A exclusão do atributo target aconteceu para deixar nas mãos do usuário a decisão de como abrir um link.
_blank é uma arbitrariedade, mas obviamente há situações onde é preciso abrir uma segunda janela, principalmente se essa janela servir para apoio da anterior, como por exemplo um login ou algo assim… e aí acredito que um simples window.open ta bom…
mas de qualquer forma é legal a idéia do post
Acredito que o usuário tenha que ter essa possibilidade, mas em links criados por conteúdo dinamico, tais como: comentários, guestbooks e posts em fóruns, não é interessante perder a visita do internauta para um link assim, mesmo se for de grande relevância.
Eh…tava querando usar esse codigozin no meu site pra ficar nos padroes…so q naum manjo muito (ainda) e naum consegui usar…onde eu coloco isso? direto no codigo, la no head neh naum? naum consegui…da uma luz alguem ae! []s e parebens pelo site!
aonde eu insiro o codigo? para abrir links em outra janela.
@Renato,
Primeiro faça o download do jQuery e o coloque no header de sua página. Após isso é só colocar o código citado no post dentro do header de sua página também.
e seu eu quiser direcionar a abertura do link para um div dentro da propria página?
@Thiago,
Utilize o ajax do jQuery para isso.
Eu testei e as soluções acima não funcionaram. Então proponho da seguinte forma:
$(document).ready( function() {
$(‘a[rel="external"]‘).attr(‘target’,'_blank’);
});
O do Mikael Funcionou legal! Os outros eu não conseguir fazer funcionar.
Obrigado pelo post!
Galera mais um modo de trabalhar com o jQuery, digita – se um pouco mais mas fica bem visivel todos os eventos e o que acontece. Valeu ai galera.
var x;
x = $(document);
x.ready(defEvento);
function defEvento()
{ $(“a[rel=external]“).click(defLink);}
function defLink()
{ $(this).attr(‘target’,'_blank’);}