Desenvolvimento

Teste 8 - A Janela Pop-up

O quadro abaixo apresenta três funções destinadas a manipular uma janela pop-up. Cada uma das opções aciona uma função específica, cujos códigos estão mostrados mais abaixo.

Controles de Abertura da Janela Pop-up

Abrir
Fechar
Alternar a Janela Pop-up

Eis os trechos cruciais do código desta página:

<head>
   <script type='text/javascript'>
      var newWindow = null

      function openWindow(contentURL,windowName,windowWidth,windowHeight) {
         if (newWindow == null) {
            widthHeight = 'height=' + windowHeight + ',width=' + windowWidth
            newWindow = window.open(contentURL,windowName,widthHeight)
            newWindow.focus()
            }
         else {
            newWindow.focus()
         }
      }


      function closeWindow() {
         if (newWindow != null) {
            newWindow.close()
            newWindow = null
            }
      }


      function toggleWindow(contentURL,windowName,windowWidth,windowHeight) {
         if (newWindow == null) {
            widthHeight = 'height=' + windowHeight + ',width=' + windowWidth
            newWindow = window.open(contentURL,windowName,widthHeight)
            newWindow.focus()
            }
         else {
            newWindow.close()
            newWindow = null
            }
      }

   </script>
</head>

<body onunload="closeWindow()">
   ...
   <em><strong>Controles de Abertura da Janela Pop-up</strong></em>
   <br /><br />
   <a href="javascript:openWindow('test8_file1.htm','Popup_teste8',300,120)">Abrir</a><br />
   <a href="javascript:closeWindow()">Fechar</a><br />
   <a href="javascript:toggleWindow('test8_file1.htm','Popup_teste8',300,120)">Alternar a Janela <em>Pop-up</em></a>
   ...
</body>

A variável newWindow é inicializada para registrar o estado corrente (aberto ou fechado) da janela pop-up. null significa que a janela está fechada.

A função openWindow() necessita dos seguintes argumentos:

Dentro da função openWindow() os argumentos windowWidth e windowHeight são combinados de forma a serem incluídos no método open() do objeto window. A nova janela recebe o foco através do método focus(). A função closeWindow() verifica se a janela pop-up encontra-se aberta (variável newWindow diferente de null) e fecha-a com o método close(), em seguida atribuindo o valor null à variável newWindow. Já a função toggleWindow() combina as tarefas de openWindow() e closeWindow().

O evento onunload incluído na tag <body> aciona a função closeWindow(), forçando a janela pop-up a fechar quando o visitante abandona a página que a chamou. Nos argumentos href dos links <a> são colocadas as chamadas de função no código HTML. As chamadas podem ser feitas também por meio de handlers de eventos, como feito na tag <body>.


Movendo a Janela do Browser

Na janela pop-up criada, está exemplificado o uso de duas funções de movimentação da janela, reproduzidas abaixo:

<body onload='window.moveTo(100,100)' onunload='opener.newWindow = null'>
   <strong>Janela Pop-up de teste</strong><br /><br />
   <a href="javascript:moveTo(100,100)">Mover para as coordenadas 100,100</a><br />
   <a href="javascript:moveBy(10,15)">Mover por 10,15</a>
</body>

O método moveTo(x,y) informa à janela do browser as coordenadas para onde ela deve mover seu canto superior esquerdo, dentro da área ativa da tela.

O método moveBy(dx,dy) move a janela do browser do ponto em que ela está, de acordo com as coordenadas definidas por dx e dy.

Muitas vezes, estes métodos são usados para posicionar a janela quando ela é aberta pela primeira vez, usando o handler de evento onload na tag <body>. Isto é feito neste exemplo. Além disso, foi incluído um evento onunload, que define a variável newWindow na janela de abertura como null se a janela pop-up for fechada/descarregada. Se isto não for feito e o usuário fechar a janela pop-up sem usar o link Fechar da janela principal, o próximo clique em Abrir acarretará um erro em tempo de execução do código JavaScript.