Sub-menu em outra janela

Faremos um sub-menu de opções que se mostra em uma janela secundária e uma vez selecionada a opção do sub-menu se transfere para a janela pai.

Vamos realizar um pequeno exemplo sobre como trabalhar com janelas secundárias ou popups. As janelas secundárias são essas janelinhas que se abrem além da janela principal do navegador e em geral, molestam um pouco em determinados sites gratuitos.

Para abrir essas janelas se utiliza a linguagem Javascript, mais concretamente, o método open() do objeto window. Não vamos explicá-lo aqui, porque já temos um artigo inteiro que explica detalhadamente a abertura de janelas secundárias e as características com as quais podemos abrir: Abrir janelas secundárias

Neste exemplo, iremos um pouco mais além, vamos criar uma janela secundária e a partir dela, vamos acessar às propriedades da janela pai, ou seja, a janela que a abriu. O exercício será o seguinte:

Teremos uma página com fundo branco, um campo de texto vazio e um botão. Quando se clique o botão, abriremos um popup que conterá uma tabela com as cores puras de HTML. O visitante poderá selecionar uma dessas cores e então, o fundo da página pai mudará para esta cor e a cor será escrita no campo de texto. É muito mais fácil ver o exemplo em funcionamento para compreender a explicação.

Página pai

A página original conterá um simples formulário com um botão e um campo de texto. Ademais, conterá o script Javascript necessário para abrir a janela secundária.

<html>
<head>
    <title>Sub-menu em janela a parte</title>
<script language="JavaScript">
function lancarSubmenu(){
   window.open("submenu_janela2.html","janela1","width=400,height=400,scrollbars=YES")
}
</script>
</head>
<body bgcolor="#ffffff">
<form>
<input type="text" name="colorin" size="12" maxlength="12">
<br>
<br>
<input type="button" value="Lançar sub-menu" onclick="lancarSubmenu()">
</form>
</body>
</html>

A função lancarSubmenu() é a que contém o script para abrir o popup. Para isso utiliza o método open() do objeto window, cujo uso foi descrito no artigo de Abrir janelas secundárias.

O formulário é dos mais normais. O único destacável é o atributo onclick do botão, que serve para definir as ações para serem executadas ao clicarmos o botão, neste caso uma chamada à função que abre a janela secundária.

Página secundária

A página secundária é um pouco mais complexa, mas a parte que nos interessa neste exercício é bastante simples. O importante da página é que tem que acessar à janela pai para modificar seu estado e para isso utiliza um objeto Javascript: opener.

O objeto opener está disponível nas páginas que são janelas secundárias e faz referência à janela que a abriu, ou seja, a janela pai. Em outras palavras, o objeto opener na janela popup é um sinônimo do objeto window na janela pai.

O script que acessa à janela pai é o seguinte:

<script language="JavaScript">
function atualizaPai(minhaCor){
    window.opener.document.bgColor = minhaCor
    window.opener.document.forms[0].colorin.value = minhaCor
}
</script>

A função atualizaPai() é a encarregada de realizar o trabalho. Recebe o código da cor sobre a qual foi clicada. Na primeira linha mudamos a cor da página web pai e na segunda linha colocamos o código RGB da cor recebida por parâmetro no campo de texto.

Como vemos, o objeto opener também depende do objeto window da página, como todos os demais objetos da hierarquia Javascript.

O resto da página é parecido a um artigo anterior de Javascript no qual escrevíamos com Javascript uma tabela de cores puras, com umas pequenas modificações para adapta-la às nossas necessidades. Pode-se ver a seguir:

<table width="80%" align="center" cellpadding="1" cellspacing="1">
<script language="javascript">
var r = new Array("00","33","66","99","CC","FF");
var g = new Array("00","33","66","99","CC","FF");
var b = new Array("00","33","66","99","CC","FF");
for (i=0;i<r.length;i++)
    for (j=0;j<g.length;j++) {
       document.write("<tr>");
       for (k=0;k<b.length;k++) {
          var nuevoc = "#" + r[i] + g[j] + b[k];
          document.write("<td bgcolor=\"" + novoc + "\" align=center><font size=1 face=verdana>");
          document.write("<a href=\"javascript:atualizaPai('" + novoc + "')\">");
          document.write(novoc);
       }
       document.write("</a></font></tr>");
    }
</script>
</table>

Visto a complicação deste script e dado que não vamos explicá-lo tudo outra vez, pode ser altamente recomendável a leitura do artigo anterior chamado Tabela de cores com Javascript.

O mais importante para nós agora é entender que este script cria uma tabela com todos as cores puras, colocadas cada uma em uma célula. Dentro de cada célula se escreve um link que chama à função atualizaPai() passando-lhe o código da cor que há que ser utilizada.

Podemos ver o exemplo em funcionamento.