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