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.
