Desenvolvimento - Javascript

Operações avançadas com popups em Javascript

Veja neste artigo como realizar algumas operações avançadas com popups em Javascript, alterando as propriedades da janela mãe, bem como as do próprio popup.

por Diego Cesar Ribeiro


Como atualizar janela mãe pelo seu popup

Segue abaixo, o código que demonstra como alterar a página mãe, ou página painel pelo seu popup. No exemplo abaixo, a página mãe tem uma barra de texto e um link, que por sua vez, leva ao popup. Ele, contem uma barra de texto e um botão, que ao ser apertado, copia o conteúdo escrito na barra de texto, e transfere para a barra de texto da página mãe.

Listagem 1: Código de página mãe

<html>
<head>
</head>
<body>
<a href="" onClick="javascript:window.open ('popup.html', 'popup') ;return false">Abrir popup</a>
<br/>
<form name="outputForm">
<input type=text value="" name="textofilho" size=20>
</form>
</body>
</html>

Explicando o código:

<a href="" onClick="javascript:window.open ('popup.html', 'popup') ;return false">Abrir popup</a>

Esse código logo acima, representa o link que irá abrir o popup. Como você viu, eu anulei o código de link a href, e optei pelo onClick, pois algumas vezes, quando não se faz isso, o link leva a abertura do popup em uma nova janela, mas também modifica a página mãe. Com o onClick, seguido por return false, que irá anular o link do a href, isso não acontece.

<form name="outputForm">
<input type=text value="" name="textofilho" size=20>
</form>

Esse é o código que irá criar a barra de texto na página mãe que será alterada pelo popup. Preste atenção ao definir o name do mesmo, pois é através dele que haverá a conexão entre as páginas, como se segue no código abaixo.

Listagem 2: Código de página popup, ou página filha

<html>
<head>
</head>
<body>
<input type=text name= "textopai">
<input type=button onClick="opener.document.outputForm.textofilho.value= ' Hello ' + textopai.value + ' !' ">
</body>
</html>

Novamente explicando o código:

<input type=text name= "textopai">

Essa barra de texto, criada na página popup, é que servirá de modelo a barra de texto “filho”, na página mãe.

<input type=button onClick="opener.document.outputForm.textofilho.value= 'Hello ' + textopai.value + ' !' ">

Nessa linha do código, eu criei um botão (button). Será ele quem irá levar a informação de textopai, na página popup, para textofilho, na página mãe. O código em onClick será o responsável por esse evento. Opener, do inglês, significa “abridor”; do ponto de vista do popup, seu abridor será a página mãe. Então, em ordem sequencial: Abridor (página mãe).documento.textofilho (que está na página mãe).valor (seu conteúdo textual). Logo depois, os valores que estiverem dentro de aspas simples, serão textos já formatados, e os que não estiverem dentro de aspas simples, como textopai.value serão valores de objetos que já se encontram na página. Entre um valor e outro põe-se “+”.

Como atualizar popup pela janela mãe

No código anterior, vimos como atualizar (manipular) a página mãe pela seu página popup. Nesse código abaixo, está o exemplo oposto, como atualizar o popup pela página mãe.

Listagem 3: Código de página mãe

<html>
<head>
<script language=javascript type="text/javascript">
function newPopup()
{varWindow = window.open ('filha.html', 'popup' )}
</script>
</head>
<body>
<a href="" onClick="javascript:newPopup() ;return false">abrir</a>
<input type=button onClick="varWindow.textofilho.value= 'Seu texto'  ">
</body>
</html>

Explicando o código:

function newPopup() {varWindow = window.open ('filha.html', 'popup' )}

Primeiramente, vamos definir uma function (função), cujo nome dei newPopup(). Agora, dentro de chaves, para especificar que fazem parte da função, criamos a variável. Lembro que sempre devem terminar em Window, nesse caso, varWindow. O código window.open é quem irá abrir filha.html, que será o popup. E o valor “popup”, dentro do segundo conjunto de aspas simples, será o nome representativo da página popup que será criada.

<a href="" onClick="javascript:newPopup() ;return false">abrir</a> <input type=text name="textopai" value=""> <input type=button onClick="varWindow.textofilho.value= 'Seu texto' ">

A primeira linha desse código logo acima, em negrito, é a chamada da function newPopup(), que representa o link de abertura da popup. Para variar o código, nesse não haverá textopai. Logo que o usuário clicar em button, o textofilho, que está explícito no código abaixo, na página popup, será alterado por uma valor (texto) já estabelecido na linha de código. Nesse botão, pelo evento onClick, faz-se referência a varWindow, criada logo acima, lembra? Logo ao clicar no botão, o textofilho será mudado para o valor que for estabelecido logo depois de “=”. Nesse caso, eu pus “Seu texto”.

Listagem 4: Código de popup, ou página filha

<html>
<head>
</head>
<body>
<input type=text name="textofilho" value="">
</body>
</html>

<input type=text name="textofilho" value="">

Essa será a barra de texto que irá receber o valor ordenado pela página mãe.

Primeiramente, o usuário deverá abrir o link do popup, só depois deve clicar no botão para alterar a sua barra de texto.

Manipulando imagens de janela mãe para popup

Ainda nesse tema, vou ensinar também como manipular imagens de uma janela a outra, o código só é um pouco diferente. Nesse próximo exemplo, a janela mãe terá uma âncora (link, a href), e ela, por sua vez, irá abrir o popup. Ela também terá um button, que irá adicionar uma imagem a popup, e configurar suas propriedades.

Listagem 5: Código de página popup

<html>
<head>
</head>
<body>
<img id="imagem" src="">
</body>
</html>

Explicando o código:

<img id="imagem" src="">

Essa será a imagem do popup que será alterada por um button na página mãe. Lembro que é necessário dar uma identidade a imagem (id) para que ela possa ser usada como referência.

Listagem 6: Código de página mãe

<html>
<head>
<script language=javascript type="text/javascript">
function newPopup()
{varWindow = window.open ('filha.html', 'popup' )}
</script>
</head>
<body>
<a href="" onClick="javascript:newPopup()">abrir popup</a>
<input type=button onClick="varWindow.document.getElementById ('imagem').src='abc.jpg'  ;varWindow.document.getElementById 
('imagem').width='6000' ">
</body>
</html>

Explicando o código:

Primeiramente, dentro de head, criamos uma function. Na primeira linha de código de body, criei um âncora, com onClick, que chamará a função criada em head, como já foi explicado em exemplos anteriores.

<input type=button onClick="varWindow.document.getElementById ('imagem').src='teste.jpg' ;varWindow.document.getElementById ('imagem').width='1200' ">

Esse será o botão que irá adicionar uma imagem ao popup. Em onClick, definiremos o endereço do objeto a ser manipulado, no caso, a imagem, cujo id defini como “imagem”, para ficar mais fácil. O que difere, principalmente, da manipulação de uma imagem a manipulação de uma barra de texto, é a presença do id. Para se fazer referência a ele dentro do botão, usamos getElementById(), e dentro desses parênteses, entre aspas simples, pomos o id da imagem, localizada no popup. Eu também defini um valor para a largura (width) dessa imagem. Entre o código que termina em src, que é o código para definir a imagem a ser inserida, e o código que termina em width, que é a que define a largura, separasse-os com ponto e vírgula.

Manipulando a rolagem da página popup

Esse efeito irá configurar o quão rolado estará o scrollbar (barra de rolagem) do popup, vertical ou horizontalmente; sendo esse efeito instantâneo ou logo após determinado período.

Listagem 7: Código da página mãe

<html>
<head>
<script language=javascript type="text/javascript">
function janelaSecundaria (downscroll)
{ varWindow = window.open('teste.html', 'janela1', "width=450, height=180, top=100, left=100")
setTimeout("varWindow.scroll (0, "+downscroll+")" ,0 )
}
</script>
<body>
<a href="javascript:janelaSecundaria ()">Abrir popup</a>
</body>
</html>

Explicando o código:

Defina a função janelaSecudaria (nome, esse, opcional) que receberá o parâmetro downscroll.

function janelaSecundaria (downscroll) { varWindow = window.open('teste.html', 'janela1', "width=450, height=180, top=100, left=100")

Defina as propriedades da nova janela entre parênteses dentro da variável criada. A variável deve terminar em Window.

setTimeout("varWindow.scroll (0, "+downscroll+")" ,0 )

Esse é o local do código onde é criado a rolagem. O primeiro zero represeta o quanto o popup vai se mover horizontalmente, nesse caso, nada. E “+downscroll+” irá definir que a página será movida verticalmente pelo velor definido no código abaixo. Caso eu não quisesse isso, poderia por um valor numeral qualquer, fincado assim, por exemplo: (0,45).

<a href="javascript:janelaSecundaria (35)">Abrir popup</a>

Já dentro de body, em a href, o valor que a página deve ser rolada verticalmente.

Esses códigos são bem úteis, em especial o primeiro, como manipular a barra de texto, e mais ainda o segundo, o que gerencia uma imagem de uma janela a outra. Como deu para ver, esses códigos são relativamente simples, e facilmente compreensíveis, logo, são bem fáceis de usar. É claro que não caberia nesse artigo todas as combinações possíveis de códigos avançados para o gerenciamento de popups em Javascript, mas, com base nesses, o web designer poderá ir muito longe.

Até a próxima!
Diego Cesar Ribeiro

Diego Cesar Ribeiro - Natural de Natal/RN, sou um grande entusiasta sobre tudo relacionado à tecnologia e desenvolvimento. Tenho 4 anos de experiêcia na área de desenvolvimento webstandart (html, css, tableless). Para contatos profissionais me mandem um e-mail.