22 Jan

Howto – Como abrir pop-up com Javascript corretamente

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:

  1. As pessoas que não tem javascript ativo não irá ver nada, simplesmente clicam no link e nada irá acontecer.
  2. Os sistemas de buscas não conseguem indexar conteúdo de um link #.
  3. Não sabemos onde nos levará este link, simplesmente olhando na barra de status.
  4. Se pedir para abrir uma nova janela, ou nova aba, veremos a mesma página que estamos, sem nenhum conteúdo novo.
  5. ….

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?

  1. Os usuários sem javascript terão acesso ao conteúdo.
  2. Os buscadores poderão rastrear a página.htm
  3. Poderemos saber onde o link nos levará, olhando a barra de status.
  4. 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.

20 thoughts on “Howto – Como abrir pop-up com Javascript corretamente

  1. Excelenete post…
    principalmente pelo fato de eu sempre ter feito da ‘maneira correta’ e nao sabia =D

    abraços

  2. 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.

  3. 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!

  4. 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!!

  5. 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.

  6. muito boa explicação eu usava o modo errado e nunca me toquei dessas falhas obrigado mais uma vez..

    abraço

  7. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>