Web designer | Salvador

As vezes precisamos fazer um link que abra uma janela estilo pop-up, com a finalidade do usuário continuar na página principal e que tenha algum tipo de informação em uma outra página.

Existem alguns códigos Javascript para isso, o que varia é a quantidade de código que será inserida na página ou a questão da acessibilidade.

1º Exemplo

Criamos uma função, colocamos este código dentro do cabeçalho da página.

<script language="JavaScript" type="text/JavaScript"> 
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
 
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>

E depois o código na página

<a onclick="MM_openBrWindow('pop-up.htm','','width=446,height=361')" href="javascript:;">clique aqui</a>

2° Exemplo

<a onclick="window.open('pop-up.htm','popup','width=446,height=361')" href="#">clique aqui</a>

Os dois códigos acima existem alguns pontos qua fazem o código não ser o mais ideal para criar um link como pop-up:

O usuário que não ter javascript ativo, o link não funcionará.
Os sistemas de buscas não irão indexar o conteúdo do link.
A página que se abrirá não é mostrada na barra de status.
O usuário não conseguirá abrir esta página se escolher a opção de abrir uma nova janela, ou nova aba.

O código que pode ser considerado eficiente para criar um link estilo pop-up é:

3° Exemplo

<a onclick="window.open(this.href, this.target, ‘width=446,height=361‘); return false;" href="pop-up.htm" target="_blank">clique aqui</a>

Com este código:
Os usuários sem javascript habilitado terão acesso ao conteúdo;
Os buscadores poderão indexar o conteúdo do link;
A página que se abrirá parecerá na barra de status;
Ao abrir em uma nova janela ou aba, a página abrirá com o tamanho padrão;
Mantemos o valor semântico do href, com a URL da página.