Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Última modificação: 26 março 2009

Para usar o atributo target="_blank" para que links abram em uma nova janela sem usar window.open() e ainda ter seu XHTML Strict válido, basta incluir o seguinte trecho de código no cabeçalho da sua página:

window.onload = function() {
  var links = document.links;
  for (var i = 0, s = links.length; i < s; i++) {
    if (links[i].rel == 'external') {
      links[i].target = '_blank';
    }
  }
};

Usando jQuery, o trecho de código que deve ser incluído é bem menor:

$(document).ready(function() {
  $('a[rel=external]').attr('target', '_blank');
});

Após usar este script, basta incluir o atributo rel="external" em seus links para que estes abram em nova janela:

&amp;amp;lt;a href=&amp;amp;quot;http://www.webstandards.blog.br/&amp;amp;quot; title=&amp;amp;quot;Melhor blog sobre Web Standards&amp;amp;quot; rel=&amp;amp;quot;external&amp;amp;quot;&amp;amp;gt;Blog Web Standards&amp;amp;lt;/a&amp;amp;gt;

Obs: este script foi escrito por Gustavo Straube.

12 comentários

Responder
  1. 3 de fevereiro de 2009

    Leonardo A. Souza disse:

    Essa é uma solução interessante, se de alguma forma for muuuito importante mesmo manter o código totalmente Strict.
    Em outros casos, como em uma página que já tenha muito javascript, e muitos links que precisem ser abertos em uma nova janela eu não hesitaria em distribuir target=”_blank” pelos “a”s para ganhar performance (eu já vi o IE6 demorar segundos pra executar um loop do tipo). As vezes a experiência do usuário é mais importante que um código 100% válido.

  2. 23 de março de 2009

    Alexandre disse:

    O problema é que o W3C não permite o uso de target=”_blank” em documentos XHTML strict. Ja tive esse problema em um projeto nao era permitido o uso de JavaScript por problemas de acessibilidade. Foi o inferno explicar para o cliente que acabou cedendo o uso de JS somente para isso e browser detect, pois um css com hacks tmb nao passaria no teste do W3C =/.

  3. 25 de março de 2009

    Rodrigo disse:

    Opa, só um coment, na parte
    … if (links[i].rel = ‘external’) {…

    é bom utilizar == pois senão todos os links do documento usarão o _blank, usando o == somente os rel=”external”, serão atribuidos do target

    😉

  4. 26 de março de 2009

    g3 disse:

    @ Rodrigo
    Obrigado Rodrigo pelo aviso! Já arrumei no código.

  5. 26 de março de 2009

    g3 disse:

    Eu concorto totalmente ao “NÃO USO DE TARGET BLANK!!”, mas existem situações que não tem argumentação que justifique não usar, então infelizmente nestes raros casos a solução que nós recomendamos é essa ou optar em desenvolver um documento com doctype transicional que permite o uso do atributo.

  6. 7 de abril de 2009

    Wilson disse:

    Eu só ainda não entendi qual o problema do target. Alguém sabe explicar porque ele não entrou no strict?

  7. 7 de abril de 2009

    Carlitos disse:

    @Wilson
    O problema é que o target blank é contra as normas de usabilidade, pois abrir uma nova janela (sem que o usuário espere por isso) atrapalha sua navegação.

    Por isso, todos os browsers vem “de fábrica” com atalhos de teclado para que se possa abrir qualquer link em nova janela, caso desejado.

    Esse exemplo que demos só se aplica a casos extremos, quando o cliente EXIGE que determinado link deva abrir em uma nova janela e ao mesmo tempo você queira deixar seu código válido.

  8. 10 de janeiro de 2010

    Jocimar disse:

    E como faz quando já se usa um rel=”nofollow” ou outro qualquer? Tem como combinar dois atributos rel?

    Também tentei combinar dois atributos onclick:

    onclick=”this.target=’_blank’; return true;” (essa linha no link resolve a validação)

    onclick=”javascript:pageTracker._trackPageview(‘/folder/file’);” (esse rastreia meus links externos)

    Alguem sabe como combinar esses atributos?

  9. 15 de janeiro de 2010

    g3 disse:

    Use igual o atributo “class”, apenas coloque os valores separados por um espaço.

    No site do XFN™ que tem como base o uso do atributo “rel” tem vários exemplos no site.

    site: http://gmpg.org/xfn/

  10. 18 de fevereiro de 2010

    Natanael disse:

    Acabei de “descobrir” esse blog e vou guardar nos meus favoritos, nem é por causa desse post em sí mas achei bem legal esse os post, bem explicativos. Parabéns

  11. 18 de abril de 2010

    Cal disse:

    Este exempro de jquery não funcionou…

  12. 5 de maio de 2010

    g3 disse:

    Talvez tenha esquecido algo no seu código.

Escreva seu comentário