Como fazer um target=”_blank” valido em strict. (15)
junho 22nd, 2009 by Luan Garcia, sobre Jquery.
Como sabemos, um html feito em modo strict, não permite alguns elementos eventualmente usados no modo transitional (aceitos na validação do w3c), como por exemplo o target=”_blank”. Quando digo “não permitem” quero dizer “não validam o código html”.
Porém, para tudo tem uma solução, e para este caso não é diferente. Poderíamos fazer isto com javascript puro, mas perderíamos tempo e utilizaríamos muitas linhas de código. Logo vamos a praticidade, vamos usar jquery para poder fazer este simples efeito e validar seu html strict.
Para começar é válido lembrar: o jquery pode ser baixado no próprio site do jquery. Sem ele, este tutorial nao servirá de nada.
Pra começar, vamos fazer com que o html leia nossa função no momento em que a página for carregada:
$(document).ready(function(){
linkExterno();})
Como podemos ver, eu já coloquei o nome da minha função dentro da chamada, logo a função que vamos criar, terá o mesmo nome.
Nossa função é bem simples… Não tem nenhum mistério e com certeza será muito útil para muitos desenvolvedores. Então lá vai a função:
function linkExterno() {
$(’a.linkOut’).attr(’target’,'_blank’);}
O que eu fiz neste exemplo é bem simples e vou explicar. Eu simplesmente disse que toda tag “a” que tiver uma classe “linkOut” terá um target _blank ao ser carregada a página. Sem dúvidas se fosse ser feito com javascript normal, usariamos muitas linhas de código e ainda teriamos mais dor de cabeça.
Como nós, desenvolvedores, nos preocupamos muito com a modularização, que é a separação dos conteudos (js, css e html), acho que fica valido esta dica.
Bom, este é meu primeiro post e espero que gostem. Fico aberto a críticas, elogios, sugestões, entre outros.
Um forte abraço!
Valeu Ciro! Realmente eu concordo que para este caso, o uso de javascript puro seja mais adequado, e eu inclusive tenho o código para isso, porém, com jquery é muito mais facil…. Massss, se o site nao tiver nada em jquery, realmente nao tem por que ele ser usado…
abs!
ah, meu comentário foi compilado, o link “Link com target=”blank” usando apenas javascript” era pra ser um código:
a href=”javascript:;” title=”Link com target=”blank” usando apenas javascript” onclick=”window.open(this.href); return false”
Olá Luan,
li seu post “Como fazer um target=”blank” valido em strict.” e axei muito interessante. Porém, não é necessário o uso da biblioteca jQuery para essa solução tão simples que pode ser resolvido em javascript puro.
Segue outra solução que julgo mais adequada para essa situação:
Link com target=”blank” usando apenas javascript
Ai está a mágica:
onclick=”window.open(this.href); return false”
ao ser clicado, o link abre uma nova janela onde carregara o “this.href” ou seja o que está no href deste link.
Espero ter ajudado e parabéns pelo blog.
Abraço
Fiz um post com essa nova solução!
http://blog.lucascaton.com.br/?p=78
Luan,
Descobri uma maneira melhor de fazer isto.
XHTML:
Google
JS (necessário tem o jQuery):
$(”.external”).click(function(){
window.open($(this).attr(’href’));
return false;
});
e o legal é que usando assim vc ainda pode estilizar os links externos no CSS
.external{
background:url(/images/external.gif) no-repeat center right;
padding-right:10px;
}
Valeu, me salvou!
Muito legal este tuto, quebrou um galhão. Irei passar para o pessoal de outros blogs.
Abraços chará.
Muito bom!!! e o layout do blog entra quando? rssssss. abs!
Muito bom Bruno, e obrigado pela dica. Concordo plenamente com o que voce falou, e realmente nao é valido usar o jquery so para fazer isso. Mas foi apenas um modo de mostrar ao pessoal como faz, pois tem gente que talvez quisesse usar, mas nao sabe como ou sei la.
mas obrigado pela dica e volte sempre hehe..
abs!
Bom, minhas opiniões sobre o tópico abordado: (vou pegar de cima pra baixo)
[ $(document).ready(function(){ ]
Apesar de ser mais “entendível”, eu prefiro usar o:
$(function() {
que é menor, mas vai de cada um
==================================
Tudo bem que usar jQuery você escreve em três linhas de código, porém você utiliza um mega código do jQuery pra montar todas a estrutura dela, portanto, não acho legal usar jQuery se somente for utilizado isso, pois por mais que você escreva 10 ou mais linhas de código, ficará com um tamanho menor que junto essas 3 e o jQuery.
==================================
O último ponto é sobre a utilização de JS nesse caso, Doctypes, etc. Eu não acho necessário fazer tudo isso para funcionar o target _blank. Usa o transitional mesmo, ou então o HTML, não tem problema nenhum nisso, muito pelo contrário. Às vezes parece meio obrigatório utilizar o Doctype e tudo mais, mas em casos como esses, creio que usar o transitional seja a melhor forma.
Não sou fã de ficar colocando essas coisas por javascript, ainda mais que sem JS não funciona, mas isso também é o de menos.
Lembrando que a W3C depreciou o target porque o usuário que deve escolher o destino da página, mas claro que muitos dos usuários são leigos e não sabem que segurando o shift ele abre em uma nova janela ou segurando o ctrl abre em uma nova aba.
==================================
Resumindo, cada caso é um caso, fato! Mas deixo aqui minha opinião. Discordem ou concordem. Estamos ae pra isso
Aquele abraço Luan e precisando, estamos ae.
Fala Luan !!
Boa dica o jquery eh o cara mesmo !! Já sei pra quem passar freelas … rssr
abcao
@Leonardo Storch
Obrigado Léo! Vou tentar manter sempre atualzido, entao nao deixe de sempre entrar aqui
@Gabriel Zigolis
Vlw Cocobongo!!! O início é brabo… mas vamos que vamos… abs!
@Gustavo Falquer
Vlw!
Fala Luan! Não é muito o meu mundo o HTML, mas como designer é bom conhecer as limitações e possibilidades do mesmo. =P
Salvarei essa dica aqui, ela poderá me ser útil no futuro. Pelo visto esse JQuery é O_CARA hein, tá em todas. Parabéns pelo blog!
que isso moleque, zuou muito agora hein… ehehehe
é isso ai malandro boa sorte nesse blog e vamos que vamos!!!
Excelente dica!!