Utilizando Janelas e Frames

Transcrição

1 Utilizando Janelas e Frames Aprenderemos agora algumas técnicas mais específicas para fazer o JavaScript trabalhar com várias partes das páginas e navegadores da Web. Controlando janelas com objetos Já vimos que podemos utilizar objetos browser para representar várias partes da janela de navegador e do documento atual de HTML; já vimos também que o objeto window está na parte superior da hierarquia de objeto. Uma versão do objeto window também permite trabalhar com frames; o objeto window sempre refere-se à janela atual (aquela contendo o script). A palavra-chave self é também um sinônimo para a janela atual. Você pode ter mais de uma janela na tela ao mesmo tempo e fazer referências a elas com nomes diferentes; os objetos history, document e location são todos filhos do objeto window; Criando uma nova janela Uma das utilizações mais convenientes para o objeto window é criar uma nova janela (para exibir outros documentos ou até para janelas de navegação). Pode-se criar uma nova janela de navegador com o método window.open(), como mostrado abaixo: WinObj = window.open( URL, WindowName, Feature List ); São os seguintes os components da instrução window.open( ); A variável WinObj é utilizada para armazenar o novo objeto window. Você pode acessar métodos e propriedades do novo objeto utilizando esse nome; O primeiro parâmetro do método window.open é um URL, que será carregado na nova janela. Se for deixado em branco, nenhuma página da Web será carregada; O segundo parâmetro especifica um nome de janela (aqui, WindowName). Isso é atribuído à propriedade name do objeto window e é utilizado para referir-se à janela; O terceiro parâmetro é uma lista de recursos opcionais, separados por vírgulas. Você pode personalizar a nova janela escolhendo se inclui a barra de ferramentas, a linha de status e outros recursos. Isso permite criar uma variedade de janelas flutuantes, que pode não parecer E Nemer 1 / 12

2 nada com uma janela típica de navegador. Estes recursos também incluem width e height, para configurar o tamanho da janela e vários recursos que podem ser configurados como yes (1) ou no (0): toolbar, location, directories, status, menubar, scrollbars e resizable. O primeiro exemplo abaixo, Listapag154.htm, mostra a utilização do método window.open: Abrindo e fechando janelas Você também pode fechar janelas. O método window.close( ) fecha uma janela. O Netscape não permite que você feche a janela principal do navegador sem a permissão do usuário; seu propósito principal é fechar janelas que você criou. Por exemplo, a janela abaixo fecha uma janela chamada JanAjuda: JanAjuda.close( ); O segundo exemplo abaixo, Listapag155.htm, mostra um documento HTML com exemplos para abrir e fechar janelas pressionando botões. Utilizando limites de tempo Às vezes desejamos que um script não faça nada durante um determinado tempo. O JavaScript inclui uma função embutida para fazer isso. O método window.settimeout permite especificar um retardo e um comando que será executado depois que esse retardo passar; esses retardos realmente não fazem o navegador parar o que está fazendo. Embora a instrução que você especifica no método settimeout não será executada enquanto aquele tempo de retardo não passar, o navegador continuará a fazer outras coisas enquanto espera (por exemplo, tratará os handlers de evento); Você começa um tempo limite com uma chamada para o método settimeout( ), que temo dois parâmetros. O primeiro é uma instrução de JavaScript, ou grupo de instruções, incluída aspas. O segundo parâmetro é o tempo de espera em milisegundos. E Nemer 2 / 12

3 <TITLE> Aplicação do método window.open para abrir janelas - Listapag154.htm </TITLE> <h2>exemplo de aplicação do método window.open para abrir janelas - Listapag154.htm</h2> <br>opções disponíveis: <br>1 - Janela com largura de 100 e altura de 100 <br>2 - Janela com largura de 200 e altura de 200 <br>3 - Janela com largura de 300 e altura de 300 <br>4 - Janela com largura de 400 e altura de 400 <br>5 - Janela do jornal O Globo <br>qualquer outro número - Fim do programa <script language = "JavaScript"> do tela = window.prompt("entre com a janela desejada"); </script> switch(tela) case '1': Jan100 = window.open("","janpeq1", "width=100, height=100, top=150, left=0, toolbar=0, status=0"); break; case "2": Jane200= window.open("","janpeq2", "width=200, height=200, top=150, left=100, toolbar=0, status=0"); break; case "3": Jane300 = window.open("","janpeq3", "width=300, height=300, top=150, left=200, toolbar=0, status=0"); break; case "4": Jane400 = window.open("","janpeq4", "width=400, height=400, top=150, left=300, toolbar=0, status=0"); break; case "5": JaneOGlobo = window.open(" "janoglobo"); while (tela >0 && tela <6) E Nemer 3 / 12

4 <TITLE> Exemplo de aplicação dos métodos open e close para objetos window - Listapag155.htm </TITLE> <script language = "javascript"> function jan100x100 ( ) Jan100 = window.open("","janpeq1", "width=100, height=100, top=150, left=0, toolbar=0, status=0"); function jan200x200 ( ) Jan200= window.open("","janpeq2", "width=200, height=200, top=150, left=100, toolbar=0, status=0"); function jan300x300 ( ) Jan300 = window.open("","janpeq3", "width=300, height=300, top=150, left=200, toolbar=0, status=0"); function jan400x400 ( ) Jan400 = window.open("","janpeq4", "width=400, height=400, top=150, left=300, toolbar=0, status=0"); </script> <h2>exemplo de aplicação dos métodos open e close para objetos window - Listapag155.htm</h2> <form name="formprinc"> <input type="button" value="abre formulário 100x100" onclick="jan100x100( );"> <input type="button" value="fecha formulário 100x100" onclick="jan100.close( );"> <br><input type="button" value="abre formulário 200x200" onclick="jan200x200( );"> <input type="button" value="fecha formulário 200x200" onclick="jan200.close( );"> <br><input type="button" value="abre formulário 300x300" onclick="jan300x300( );"> <input type="button" value="fecha formulário 300x300" onclick="jan300.close( );"> <br><input type="button" value="abre formulário 400x400" onclick="jan400x400( );"> <input type="button" value="fecha formulário 400x400" onclick="jan400.close( );"> <br><br> <input type="button" value="fecha formulário principal" onclick="window.close( );"> </form> E Nemer 4 / 12

5 Atualizando uma página com limites de tempo Normalmente, um tempo limite acontece uma vez porque a instrução que você especifica na instrução settimeout somente é executada uma vez. Mas, freqüentemente, você vai querer que sua instrução execute repetidamente. Por exemplo, seu script pode estar atualizando um clock ou uma contagem regressiva e precisa executar uma vez por segundo; Você pode fazer um tempo limite repetir emitindo a chamada de método settimeout( ) novamente na função chamada pelo tempo limite, como mostrado abaixo. <TITLE> Exemplo de timeout </TITLE> <script> var contador=0; //chama a função Atualiza 2 segundos após o primeiro carregamento ID=window.setTimeout("Atualiza();",2000); function Atualiza( ) contador++; window.status="o contador está agora em "+contador; document.form1.input1.value= "O contador está agora em "+ contador; //seta um outro timeout para a próxima contagem ID=window.setTimeout("Atualiza( );",2000); </script> <h1>exemplo de timeout</h1> <hr>o texto abaixo e a linha de status estão sendo atualizados a cada dois segundos. Clique no botão RESET para reiniciar a contagem, ou no botão FIM para parar a contagem. <hr> <form name="form1"> <input type="text" name="input1" size="40"><br> <input type="button" value="reset" onclick="contador=0;"><br> <input type="button" value="fim" onclick="window.cleartimeout(id);"> <hr> A tela de saída do script anterior é apresentada abaixo: E Nemer 5 / 12

6 Exibindo caixas de diálogo O objeto window inclui três métodos que são úteis para exibir mensagens e interagir com o usuário. Você já utilizou esses métodos em alguns de seus scripts; O método alert exibe uma caixa de diálogo de alerta, que simplesmente dá uma mensagem para o usuário; O método confirm exibe uma caixa de diálogo de confirmação. Isso exibe uma mensagem e inclui botões OK e Cancel. Esse método retorna true se OK for pressionado e false se Cancel for pressionado; O método prompt exibe uma mensagem e solicita ao usuário uma entrada. Retorna o texto inserido pelo usuário. O exemplo abaixo utiliza botões e handlers de evento para permitir testar caixas de diálogos. E Nemer 6 / 12

7 <TITLE> Exemplo de caixas de diálogo - Listapag160.htm </TITLE> <h1> Exemplo de caixas de diálogo - Listapag160.htm </h1> <hr> Use os botões abaixo para testar caixas de diálogo em JavaScript. <hr> <form name="winform"> <input type="button" value="mostra uma caixa de alerta" onclick="window.alert('esta é uma caixa de alerta.');"> <p><input type="button" value="mostra uma Confirmação" onclick="temp = window.confirm('você gostaria de confirmar?'); window.status=(temp)?'confirm: true':'confirm: false';"> <p><input </form> <br> Divirta-se! <hr> type="button" value="mostre um Prompt" onclick="var temp=window.prompt('entre algum texto:', 'Este é o valor default'); window.status=temp;"> E Nemer 7 / 12

8 O documento anterior exibe três botões e cada um utiliza um handler de evento para exibir uma das caixas de diálogos: A caixa de diálogo de alerta é exibida quando você dá um clique no botão; A caixa de diálogo de confirmação é exibida quando você pressiona o botão e exibe uma mensagem na linha de status para indicar se true ou false foi retornado. O valor retornado é armazenado na variável temp; O terceiro botão exibe a caixa de diálogo de aviso. Note que o método prompt aceita um segundo parâmetro, que é utilizado para configurar um valor padrão para a entrada. O valor que você insere é armazenado na variável temp e exibido na linha de status. Note que se você pressionar o botão Cancel na caixa de diálogo de aviso, o valor null é retornado. Trabalhando com frames Os navegadores suportam frames ou framesets, que permitem dividir a janela de navegador em múltiplos painéis. Cada frame pode conter um URL separado ou a saída de um script. Utilizando objetos JavaScript para frames Quando uma janela contém múltiplos frames, cada frame é representado no JavaScript por um objeto frame. Esse objeto é equivalente a um objeto window, mas é utilizado para lidar com aquele frame. O nome do objeto frame é o mesmo que o atributo NAME que você dá a ele na tag <FRAME>. Quando você está utilizando frames, as palavras-chave window e self referem-se ao frame atual. Outra palavra-chave, parent, permite referir-se à janela principal. Cada objeto frame em uma janela é filho do objeto window pai. Suponha que seja definido um conjunto de frames utilizando a HTML da listagem abaixo: <TITLE> Seta 4 frames - set4fram.htm </TITLE> <frameset rows="*,*" cols="*,*"> <frame name="topleft" src="topleft.htm"> <frame name="topright" src="topright.htm"> <frame name="bottomleft" src="botleft.htm"> <frame name="bottomright" src="botright.htm"> </frameset> E Nemer 8 / 12

9 O script anterior divide a janela em quatro. Se você tivesse um programa JavaScript no arquivo topleft, ele faria referência às outras janelas como parent.topright, parent.bottomleft e assim por diante, como mostrado no próximo exemplo: <TITLE> Página inicial do frame topleft - topleft.htm </TITLE> <script language="javascript"> function carregafram() parent.topright.location="newtopright.htm"; parent.bottomleft.location="newbotleft.htm"; parent.bottomright.location="newbotright.htm"; </script> <P>Página inicial do frame topleft</p> <a href="#" onclick="carregafram( );"> Carrega os outros frames</a> Array de frames Em vez de referenciar frames em um documento por nome, você pode utilizar o array frames. Esse array armazena as informações sobre cada um dos frames no documento. Os frames são indexados iniciando com zero e começando com o primeiro tag <FRAME> no documento de frameset; por exemplo, pode-se fazer referência aos frames utilizando referências ao array, como mostrado no exemplo a seguir. E Nemer 9 / 12

10 <TITLE> Seta 4 frames - set4fram.htm </TITLE> <frameset rows="*,*" cols="*,*"> <frame name="topleft" src="topleft.htm"> <frame name="topright" src="topright.htm"> <frame name="bottomleft" src="botleft.htm"> <frame name="bottomright" src="botright.htm"> </frameset> <TITLE> Página inicial do frame topleft - topleft.htm </TITLE> <script language="javascript"> function carregafram() parent.topright.location="newtopright.htm"; parent.bottomleft.location="newbotleft.htm"; parent.bottomright.location="newbotright.htm"; window.location="newtopleft.htm"; function listalocationfram () for (i=0; i<window.parent.frames.length;i++) alert("location do frame "+ i + " é: "+window.parent.frames(i).location); function listatitulosfram () for (i=0; i<window.parent.frames.length;i++) alert("o título do frame "+ i + " é: "+window.parent.frames(i).document.title); </script> <P>Página inicial do frame topleft</p> <a href="#" onclick="carregafram( );"> Carrega os outros frames</a><br> <a href="#" onclick="listalocationfram( );"> Lista location dos frames</a><br> <a href="#" onclick="listatitulosfram( );"> Lista títulos dos frames</a> E Nemer 10 / 12

11 <script language="javascript"> //window.location="newtopleft.htm"; </script> <TITLE> Página inicial do frame topright - topright.htm </TITLE> <P>Página inicial do frame topright</p> <TITLE> Página inicial do frame botleft - botleft.htm </TITLE> <P>Página inicial do frame botleft</p> <TITLE> Página inicial do frame botright - botright.htm </TITLE> <P>Página inicial do frame botright</p> E Nemer 11 / 12

12 <TITLE> Página alternativa do frame topleft - newtopleft.htm </TITLE> <H1>Página alternativa do frame topleft</h1> <TITLE> Página alternativa do frame topright - newtoptight.htm </TITLE> <H1>Página alternativa do frame topright</h1> <TITLE> Página alternativa do frame botleft - newbotleft.htm </TITLE> <H1>Página alternativa do frame botleft</h1> <TITLE> Página alternativa do frame botright - newbotright.htm </TITLE> <H1>Página alternativa do frame botright</h1> E Nemer 12 / 12