HowTo: Veja como abrir janelas pop-up utilizando JavaScript de maneira correta.
Alguns podem pensar: “que besteira, isso é trivial, qualquer desenvolvedor com o conhecimento mais básico sabe fazer isso”.
Pois bem, acreditem, muitos fazem, mas poucos o fazem de maneira correta. Então vejamos.
———————————————————————————
Muitos usam um método errôneo para abrir um pop-up em suas páginas. Explico:
<a href=”#” mce_href=”#” onClick=”window.open(’/pagina.htm‘,’popup‘,’width=600,height=350‘)”>Abrir</a>
Neste caso, unicamente esta se criando um link com o texto ‘Abrir’, com suas cores pre-definidas e etc… porém a forma de abrir esta incorreta:
- As pessoas que não tem javascript ativo não irá ver nada, simplesmente clicam no link e nada irá acontecer.
- Os sistemas de buscas não conseguem indexar conteúdo de um link #.
- Não sabemos onde nos levará este link, simplesmente olhando na barra de status.
- Se pedir para abrir uma nova janela, ou nova aba, veremos a mesma página que estamos, sem nenhum conteúdo novo.
- ….
Resumindo, há muitos incovenientes em nossa página para uma coisa tão simples.
Para usarmos 100% o código de um pop-up seria correto usarmos dessa forma:
<a href=”/pagina.htm” target=”_blank” onClick=”window.open(this.href, this.target, ‘width=600,height=350‘); return false;”>Abrir</a>
Se não tiver o javascript ativo, o evento OnClick entra em ação, que vai reconhecer pelo elemento .this é um elemento href, e abrirá em um tamanho determinado.
Se falhar em abrir retornará um false no evento OnClick, e então o elemento <a> executaria sua função, abrindo a pagina.html em uma nova janela.
O que ganhamos com isso?
- Os usuários sem javascript terão acesso ao conteúdo.
- Os buscadores poderão rastrear a página.htm
- Poderemos saber onde o link nos levará, olhando a barra de status.
- Ao abrirmos em uma nova janela, se abrirá o conteúdo do link em uma janela de tamanho padrão.
Não custa nada fazer as coisas corretamente né?
Até a próxima.
Veja também...
- Abrir/Fechar elementos usando Javascript e CSS
- Importar JavaScript dentro de outro JavaScript
- Livro: Learning JQuery: Better Interaction Design and Web Development with Simple Javascript Techniques
- Como criar interatividade com Jquery sem saber nada de JavaScript?
- Howto – Como iniciar o VmPlayer em Full Screen
Related posts brought to you by Yet Another Related Posts Plugin.
Ótima dica…
“Acessibilidade” – esta é a palavra.
Falow!
Excelenete post…
principalmente pelo fato de eu sempre ter feito da ‘maneira correta’ e nao sabia =D
abraços
Boa dica
Parabéns pela dica! É muito importante para quem está começando (e para quem já trabalha bem com html e javascript) entender e usar alguns padrões. A preocupação com as ferramentas de indexação e segurança (o usuário “comum” pode ver o link na barra de status) são muito relevantes.
Poh, eu não sabia dessa forma correta de abrir pop-up, e sempre me preocupei com acessibilidade. Ótimo POST !!!!!!!!!!
Obrigado,
Excelente dica, coisas simples que fazem a diferença!
Abraços!
Já vai levar uma Favoritada agora!
Alguém sabe como posso aplicar isso no Flash? Acredito que seja possivel adaptar esse código. Tenho um filme com um botão onde o código é:
on (release) {
getURL(“javascript:abrir(‘fotos/foto_01.jpg’,640,480)”);
}
Valeu!
Excelente, exatamente o que eu precisava. Muito bom.
Agradeçer pela explicação.
Gostei bastante, eu na verdade utilizo uma outra, só que transforma todos os popup do mesmo tamanho daí naqueles que eu quero um tamanho diferente irei utilizar esse aí. Valeu pela dica!!
Bom dia, parabéns pela matéria, simples porém completa.
Eu mesmo não estava fazendo a coisa da forma correta…
… agora estou usando na forma certa.
Muito boa a dica acima
Howto – Como abrir pop-up com Javascript corretamente – Ótimo artigo resolveu meu problema…
muito boa explicação eu usava o modo errado e nunca me toquei dessas falhas obrigado mais uma vez..
abraço
Cara… muito boa dica… me ajudou muito…
Parabens pela iniciativa
Valeu pela dica, é sempre muito bom fazer da maneira correta.
Abraço
Muito interessante cara, parabéns!
Ehh, pode ser a maneira correta, mas se eu quero abrir pop up em fullscreen, a maneira correta não funciona, então tive que usar maneira errada mesmo, kkkkkk.