Abrir links externos em nova janela com jQuery
Postado em: 2 de maio de 2008 por Pedro RogérioRecentemente, 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?
Gustavo Ribeiro disse: 02.05.08 ás 09:22
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
Tárcio Zemel disse: 02.05.08 ás 09:34
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!
Mario Andrade disse: 02.05.08 ás 09:47
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?
Leonardo Ribeiro disse: 02.05.08 ás 10:01
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.
Pedro Rogério disse: 02.05.08 ás 10:32
@Gustavo,
Corrigido, nem havia reparado isso, fiz o post correndo!!!
Pedro Rogério disse: 02.05.08 ás 10:40
@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.
Pedro Rogério disse: 02.05.08 ás 10:57
@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.
Guilherme Medeiros disse: 04.05.08 ás 00:15
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!
Pedro Rogério disse: 04.05.08 ás 04:03
@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!!!!
Gilberto Saraiva disse: 06.05.08 ás 17:25
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 ^^
Vicente Lyrio disse: 06.05.08 ás 17:51
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
Gilberto Saraiva disse: 07.05.08 ás 10:32
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.
Danilo disse: 11.06.08 ás 14:29
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!
Renato disse: 12.07.08 ás 20:56
aonde eu insiro o codigo? para abrir links em outra janela.
Pedro Rogério disse: 12.07.08 ás 22:20
@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.
thiago disse: 25.11.08 ás 10:43
e seu eu quiser direcionar a abertura do link para um div dentro da propria página?
Pedro Rogério disse: 25.11.08 ás 11:33
@Thiago,
Utilize o ajax do jQuery para isso.