Utilizzo del DHTML con i frame attraverso il DOM
Pagina 1 di 2
Introduzione
In diversi articoli abbiamo visto come dinamizzare le pagine HTML attraverso script lato client DHTML in cui accediamo agli elementi HTML da gestire attraverso il DOM (Document Object Model).
Utilizziamo l'oggetto document in e la collezione getElementById che accetta come parametro l'ID dell'elemento HTML da catturare.
La gestione di questi sistemi di scripting in pagine Web composte da frame è leggermente differente, più ampia ma non per questo più complicata: viene chiamato in causa anche l'oggetto parent il cui scopo è proprio quello di gestire i frame.
Gestione dei frame con Javascript
Il funzionamento di questo oggetto è semplicissimo, basta posporgli il nome del frame da catturare e le proprietà e metodi per la gestione del frame corrente:
parent.nome_frame.proprietà;oppure:
parent.nome_frame.metodo();Il file HTML che genera i frameset
Passiamo subito ad un esempio pratico creando una struttura composta da frame:
<html> <head> <title>Utilizzo del DHTML con i frame attraverso il DOM</title> </head> <frameset rows="60,*"> <frame name="f1" src="top.html"> <frame name="f2" src="bottom.html"> </frameset> </html>Abbiamo creato una struttura con due frame con nome "f1" ed "f2" a cui assegnamo, rispettivamente, i file "top.html" e "bottom.html".
Il file HTML contenente il box
Segue il codice del file bottom.html:
<html>
<head>
<title>Utilizzo del DHTML con i frame attraverso il DOM</title>
<style type="text/css">
div
{
font: Normal 11px Verdana;
}
#BOX
{
background: #EEEEEE;
padding: 5px 5px 5px 5px;
width: 150px;
border: Solid 1px #CCCCCC;
}
div.MOSTRA
{
visibility: Visible;
}
div.NASCONDI
{
visibility: Hidden;
}
</style>
</head>
<body>
<div id="BOX" class="NASCONDI">Testo del box...</div>
</body>
</html>
La pagina contiene un box con un ID ed una classe; l'ID serve sia in fase di richiamo attraverso lo script Javascript che esamineremo a breve, che in fase di stilizzazione.
La classe, invece, si limita a nascondere l'elemento al caricamento della pagina, ma vediamo che ne abbiamo creata anche un'altra che servirà a mostrare l'elemento.
