16. Abrir novas Janelas

Neste capítulo mostraremos como podem ser abertas novas janelas sobre uma janela contendo o documento principal.

É importante não confundir esta forma de abrir janelas com a divisão da tela em várias partes, ou mesmo com a chamada de outras páginas. Para que não existam dúvidas, explicaremos um pouco sobre estes dois outros métodos.

A divisão de uma tela em várias janelas contendo documentos diferentes é feita através do objecto FRAME do Html. Neste caso, a tela inteira é considerada como um FrameSet e cada parte em que ela for dividida é considerada como um Frame. Cada Frame é definido dentro do FrameSet através da especificação dos parâmetros: % da tela na vertical (cols), % da tela na horizontal (rows) e nome de cada frame. Uma vez criado o FrameSet poderemos abrir documentos distintos em cada Frame. Para fazer isto, acrescente ao link do documento a directiva target=nome do frame.

Ex.:

<href= "Eventos.htm " target= "Principal ">

Isto fará com que o arquivo html Eventos.htm seja aberto dentro do frame de nome Principal.

A simples chamada de outras telas (documentos) é feita através do link para o documento desejado.

Ex.:

<href= "Eventos.htm " >

Isto fará com que o arquivo html Eventos.htm seja aberto em substituição a tela existente.

Bem, voltemos ao nosso caso que é a abertura de janelas sobre um documento. Isto é feito através de comandos JavaScript, que permitem: Abrir uma janela, Abrir um documento dentro desta janela, Escrever o conteúdo da janela, Fechar a janela e Fechar o documento.

Abrir a Janela:

A sintaxe geral deste método é a seguinte:

Variavel = window.open ( "Url ", " Nome da janela ", " Opções ")

Onde:

Variavel - Nome que será atribuído como propriedade da janela.

Url - Endereço Internet onde a janela será aberta. Normalmente você estará utilizando a sua própria Url, neste caso, preencha com " ".

Nome da Janela - É o nome que aparecerá no top da janela (Título)

Opções - São as opções que definem as características da janela, quais sejam:

toolbar - Cria uma barra de ferramentas tipo " Back ", " Forward ", etc.

location - Abre a barra de location do browse.

directories - Abre a barra de ferramentas tipo " What’s New ", " Handbook ", etc.

status - Abre uma barra de status no rodapé da janela.

scrollbars - Abre barras de rolamento vertical e horizontal.

menubar - Cria uma barra de menu tipo " File ", " Edit ", etc.

resizable - Permite ao usuário redimensionar a janela.

width - Especifica a largura da janela, em pixels.

height - Especifica a altura da janela, em pixels.

Todas as opções (exceto width e height) são boleanas e podem ser modificadas de duas formas. Exemplo: " toolbar " ou " toolbar=1 ") são a mesma coisa. Se nada for especificado, entende-se que todas as opções estão ligadas; Caso seja especificada qualquer opção, será entendido que estão ligadas apenas as opções informadas.

As opções devem ser informadas separadas por vírgula, sem espaço entre elas.

Abrir um Documento:

Para abrir um documento dentro da janela, deve ser utilizado o seguinte método:

Variavel.document.open()

Onde " Variavel " é o nome da variável associada ao método window.open

Escrever no Documento:

Para escrever a tela no documento, deve ser utilizado o seguinte método:

Variavel.document.write ( "Comandos html, Comandos JavaScript, Textos, etc. ")

Fechar a Janela:

Para fechar a janela, utilize o seguinte método:

Variavel.document.write ( "window.close() ")

Fechar o Documento:

Para fechar o documento, utilize o seguinte método:

Variavel.document.close ()

A seguir, apresentamos um exemplo no qual estamos abrir um documento onde o usuário escolherá uma opção (Elógica ou Recife) e dará um Click em um botão (Nova Janela). Neste momento será aberta uma nova janela que conterá a foto escolhida pelo usuário e um botão que, ao receber o Click, fechará a janela.

Normalmente, qualquer href ou src dentro de uma página, por padrão, acede ao arquivo ou À imagem no mesmo directório onde está a página actual, a menos que seja especificado um novo caminho (Path).

No caso de abertura de uma nova janela, através do método window.open, as versões mais antigas dos browses não conseguem " ver " o Path, sendo necessária a completa informação do caminho (path) onde o arquivo ou imagem estão armazenados, em todas as chamadas dos comandos Html href ou src.

Observe que na função estamos utilizando dois novos métodos:

navigator.appVersion: para verificarmos a versão do browse que esta sendo utilizado

document.location: para obtermos o Path da localização do arquivo Html que está correntemente em uso.

No exemplo abaixo estamos, inicialmente, identificando a versão do browse. Caso seja antiga, para não escrevermos todo o caminho a cada chamada e ainda, considerando que os arquivos chamados estão no mesmo directório da página actual, estamos obtendo o Path do arquivo actual e eliminando o nome do arquivo que está na última referencia do Path. Quando fizermos a chamada das imagens (comando src) só será necessário a concatenação do nome do arquivo chamado com a raiz do path que, no exemplo, armazenamos na variável de nome Local.

function Abrejanela(Opcao) {

Versao = navigator.appVersion

Versao = Versao.substring(0, 1)

Local = " "

if (Versao < 3) {

Local = document.location

UltLoc = Local.lastIndexOf( "/ ")

Local = Local.substring(0, UltLoc + 1)

}

NovaJanela = window.open ( " ", " OutraJanela ", " width=300,height=400 ")

NovaJanela.document.open()

NovaJanela.document.write ( "<html><head><title>Nova Janela ")

NovaJanela.document.write ( "</title></head><body bgcolor=’white’> ")

NovaJanela.document.write ( "<form> ")

if (Opcao == 1)

{ NovaJanela.document.write ( "<br>Logomarca Elogica<hr><br> ")

NovaJanela.document.write

( "<img width=200 height=200 src= " + Local + " Marcaelo.gif> ") } else { NovaJanela.document.write ( "<br>Recife Alto Astral<hr><br> ")

NovaJanela.document.write

( "<img width=150 height=200 src= " + Local + " Recife.gif> ") }

NovaJanela.document.write ( "<br><hr><p></p></form> ")

NovaJanela.document.write ( "<form><input type=’button’ name=’Fecha’ " +

"value=’Fecha Janela’ " + " onclick=’window.close()’> ")

NovaJanela.document.write ( "</form></body></html> ")

NovaJanela.document.close() }

</script>

<body>

<p></p>

<p>Escolha a foto a ser apresentada na nova janela:</p>

<p>

<input type=radio name= "Opcao " value= "1 " checked>Elogica

<input type=radio name= "Opcao " value= "2 ">Recife

</p> <p>

<input type= "button " name= "Envia " value= "Nova Janela "

onclick= "if (Form1.Opcao[0].checked == true)

{Abrejanela(Form1.Opcao[0].value) }

else

{Abrejanela(Form1.Opcao[1].value) } " >

</p>

</form>

</body>

16. Abrir novas Janelas

VOLTAR