I
FRAME
L'avanzare delle
tecnologie legate
allo sviluppo di
nuovi e sofisticati
browser Web, o il
miglioramento di
quelli già
esistenti, ha
consentito agli
sviluppatori di
lavorare con una
certa tranquillità
con la tecnologia
rappresentata dai
frame, il
pericolo di non
vedere una pagina
divisa in
frameset sembra
essere cessato.
Rimane purtroppo a
carico dello
sviluppatore, ed a
questo non c'è
rimedio,
l'incombenza di
dover specificare
determinati tipi di
funzionamento, di
tipo stilistico e
funzionale, in
maniera meno agevole
di quanto una
pagina, o un sito,
non diviso in una
serie di frameset
consente.
Lo scopo di questo
tutorial non è
quello di insegnare
ad utilizzare i
frame, si suppone
che il lettore
conosca a
sufficienza questa
particolare
tecnologia messa a
disposizione dall'Html,
comunque, per venire
in contro ai meno
avvezzi, costruiremo
insieme una pagina
di prova che
utilizzeremo in
tutti gli esempi che
incontreremo.
Costruzione del
frameset di prova
Creiamo una cartella
che chiameremo
frames che
conterrà tutti i
file degli esempi
che implementeremo
in questa sede,
all'interno creiamo
il file index.htm
che divideremo in
tre frameset, non è
importante includere
gli stessi file e
nominare i singoli
frame nello stesso
modo in cui farò io,
ma per lavorare più
agevolmente con i
codici che andremo a
presentare,
consiglio di
utilizzare le stesse
diciture.
Analizziamo
brevemente il codice
Html:
<html>
<head>
<title>Gestione
dei frame con
Javascript</title>
</head>
<frameset
rows="80,*"
border="3">
<frame
src="intestazione.htm"
name="intestazione"
noresize
scrolling="no">
<frameset
cols="150,*"
border="no">
<frame
src="menu.htm"
name="menu" noresize
scrolling="no">
<frame
src="principale.htm"
name="principale"
noresize
scrolling="auto">
</frameset>
</html>
Abbiamo creato la
classica pagina
divisa in frame,
ovvero con un frame
superiore in
orizzontale che
abbiamo chiamato
intestazionein
cui si potrà
disporre un logo del
sito sulla sinistra
ed eventualmente un
banner pubblicitario
sulla destra, un
frame in verticale
sulla sinistra che
abbiamo chiamato
menu in cui
disporremo un menu
in verticale ed
eventualmente altri
accessori di
navigazione, ed in
fine l'area
principale che
ospiterà il
contenuto reale del
sito, il cui nome
assegnato è
principale.
Vediamo che aspetto
avrà la struttura
della pagina appena
creata:
|
Intestazione |
|
Menu |
Principale |
Nei vari frameset
inseriremo i
seguenti file, come
deducibile dal
codice appena
presentato, che
avranno lo scopo di:
1.
intestazione.htm
- contenere logo ed
eventuale banner
2.
menu.htm -
contenere il menu ed
eventuali utility di
navigazione
3.
principale.htm -
esporre il reale
contenuto del sito.
L'oggetto parent
Javascript, per
lavorare con i
frame, ci mette a
disposizione
l'oggetto parent.
Presentiamo un primo
banale esempio,
supponiamo di avere
una casella di testo
ed un bottone di
invio nel menu nel
frameset sinistro e
di voler stampare a
video il testo,
memorizzato nella
variabile di tipo
string, nel frameset
principale.
Apriamo il file
index.htm che
abbiamo suddiviso in
frame, apriamo il
codice del file
menu.htm ed
inseriamo il
seguente modulo
appena descritto:
<form name="modulo">
<input
type="text"
name="testo_da_inserire">
<input
type="button"
value="Invia"
onClick="ScriviTesto()">
</form>
Vediamo il codice a
cui si riferisce la
funzione
ScriviTesto()
richiamata
nell'evento onClick
sul bottone di
invio:
<script
language="javascript">
<!--
function
ScriviTesto() {
var testo =
modulo.testo_da_inserire.value;
parent.principale.document.write(testo);
}
//-->
</script>
All'oggetto parent
va associato il nome
del frame di
destinazione, più la
funzione in oggetto,
in questo caso il
document.write().
Stampare il
contenuto di un
altro frameset
Conclusa questa
panoramica
sull'oggetto parent,
passiamo ad
analizzare qualche
suo, utilizzo più
concreto e
funzionale, volendo,
un esempio come
quello mostrato in
precedenza può
tornare utile a chi
volesse inserire in
un frameset un
motore di ricerca
interno per keywords
e visualizzare i
risultati su di
un'altro frameset.
Esigenza molto
comune è quella di
effettuare stampe
lanciando il comando
da un frameset
diverso da quello
che si desidera
stampare.
Sempre riferendoci
al file index.htm,
inseriamo nella
pagina principale un
testo o delle
immagini da
stampare, e da uno
dei due altri
frameset, ad esempio
da intestazione.htm,
tanto per cambiare
un po, lanciamo il
comando di stampa:
<div><a
href="javascript:void(0)"
onClick="Stampa()">Stampa
la pagina
sottostante</a></div>
la funzione
Stampa() avrà il
seguente codice:
<script
language="javascript">
<!--
function Stampa()
{
parent.principale.focus();
window.print();
}
//-->
</script>
La funzionalità di
questa funzione
verte
sull'impostazione
del focus sul
frameset che si
desidera stampare,
seguito ad vero e
proprio comando di
stampa.
Aprire un file
sempre nel frameset
originale
Un grosso problema
in cui si rischia di
incorrere
utilizzando la
tecnologia dei frame
per un sito è quella
di trovare su un
motore di ricerca
pagine indicizzate
ed estratte dal
database che, una
volta aperte, non
compariranno nel
frameset originale,
nel nostro caso
index.htm,
rischiando di
perdere il senso
grafico del lavoro,
oppure aprendo file
che da soli sembrano
non aver senso, come
il menu o
l'intestazione.
Javascript permette
di risolvere questo
non indifferente
problema con un
semplicissimo script
da includere in
tutti i file del
sito, naturalmente
escluso il frameset
index.htm.
Per evitare un
domani di dover
correggere pagina
per pagina lo script
in caso di doverosi
cambiamenti
strutturali del
sito, ad esempio se
il file iniziale non
dovesse più
chiamarsi index.htm
bensì default.htm,
includiamo lo script
in un file esterno,
ad esempio
apri_frames.js,
e lo richiamiamo su
tutte le pagine tra
i Tag <head>
e </head>,
come predetto:
<script
language="javascript"
src="apri_frames.js"></script>
oppure fornendo il
percorso relativo o
assoluto del file.
Il seguente codice
rappresenta lo
script che
utilizzeremo per lo
svolgimento della
suddetta funzione:
if (window.location
== parent.location)
{
location.href =
"http://www.server.it/index.htm";
}
Impostiamo lo script
al caricamento della
pagina, imponendo
che se l'indirizzo
assoluto del file
appena aperto è
uguale all'indirizzo
di un file che viene
richiamato in un
frameset, allora
creeremo un link
verso il file
index.htm in cui
abbiamo costruito i
frameset, abbiamo
utilizzato un
indirizzo assoluto,
possiamo anche solo
utilizzare il nome
del file senza l'URL
completo, ma non
sapendo come si
comportano i vari
motori di ricerca,
rischieremmo di
incorrere in un
errore 404,
ovvero file non
trovato, consiglio
quindi di utilizzare
il path completo
come nell'esempio.
Insomma, grazie
all'oggetto parent
possiamo comodamente
lavorare con i
frame, ottenendo
funzionalità che col
semplice Html non
potremmo sfruttare,
presento ora una
carrellata di esempi
pratici e di
ricorrente utilizzo.
Creazione di una
barra di navigazione
Può essere davvero
molto comodo
disporre dei
classici pulsanti
"Back" e "Next" in
una barra di
navigazione
posizionata in un
frameset, avendo su
di un altro
frameset, sfruttiamo
le funzioni
history.back() e
history.forward()
associate
all'oggetto parent,
creiamo la barra
composta da questi
due classici link
nel frameset menu
verso il principale:
<div align="center">
<a
href="javascript:parent.principale.history.back()">Back</a>
::
<a
href="javascript:parent.principale.history.forward()">Next</a>
</div>
Chiudere una
popup contenente un
frameset
Supponiamo di avere
una finestra di tipo
pupup contenente un
frameset, impostando
il classico comando
di chiusura
window.close()su
una delle pagine
contenute nel
frameset nella
popup, il browser
tenterà di chiudere
solo quel singolo
file, cosa
impossibile, quindi
l'output della
funzione sarà nullo,
per fare ciò
utilizziamo
l'oggetto parent in
questo modo:
<div><a
href="javascript:parent.close()">Chiudi
questa
finestra</a></div>
Aggiornare due o
più frames con un
solo click
Ipotizziamo la
situazione in cui
abbiamo necessità di
implementare un link
che cambi due file
in due frameset,
facendo partire da
un terzo frameset il
comando, per restare
fedeli al frameset
costruito all'inizio
del tutorial, ovvero
index.htm,
ipotizziamo di voler
aggiornare i file
intestazione.htm e
principale.htm,
linkando dal file
menu.htm, questo è
il codice dello
script:
<script
language="javascript">
<!--
function
AggiornaFrames() {
parent.principale.location.href
= "pagina1.htm";
parent.principale.location.href
= "pagina2.htm";
}
//-->
</script>
Questo è il link:
<div><a
href="javascript:AggiornaFrames()">Testo
del link</a></div>
L'oggetto parent
in Html
Nella definizione
dei link in html
abbiamo l'attributo
target del
Tag area che
ci consente di
impostare il link in
questione verso una
nuova istanza del
browser, oppure
verso un frameset,
in questo caso
utilizzeremo come
valore di target il
nome del frameset di
destinazione.
Possiamo utilizzare
l'attributo
_parent per
eliminare i frame
correnti ed aprire
nella stessa istanza
del browser una
pagina non
contenente frame.
Più presto a farsi
che a dirsi,
includiamo questo
link Html nel file
principale.htm:
<div><a
href="http://www.lukeonweb.net"
target="_parent">Vai
a
lukeonweb.net</a></div>
Utilissimo anche nel
caso in cui vogliamo
inviare i dati di un
form ad una pagina,
ad esempio Asp, che
li elaborerà,
inseriamo nel Tag
<form>il target
al frameset
desiderato:
<form name="modulo"
action="elabora_dati.asp"
method="post"
target="principale">
Gestione dei
frame in linea
(iframe)
Si suppone che il
lettore sappia che i
frame in linea,
costruiti col Tag
<iframe>, si
differenziano dai
normali frame per il
fatto che sono
considerabili come
degli elementi Html,
come ad esempio
un'immagine, che
richiamano un file
Html invece che
un'immagine Gif o
Jpeg... se il
lettore non lo
sapeva, ora lo sa
:-)
L'utilizzo
dell'oggetto parent
nei confronti dei
frame in linea è
pressocchè analogo a
quello dei normali
frame, voglio
fornire al lettore
un trucco per
gestire i frame in
linea in base a
delle condizioni, ad
esempio stabilendo
una diversa
dimensione a seconda
della risoluzione,
nel caso specifico
vogliamo che se la
risoluzione è minore
o uguale a 800X600
il frameset sarà
alto 300 pixel,
altrimenti, se
maggiore, sarà 450
pixel:
<script language="javascript">
<!--
var iframe = "<iframe
src='nome_file.htm'
name='esempio'
frameborder='0'
scrolling='auto'
width='400' ";
if
((window.screen.width
<= 800) &&
(window.screen.height
<= 600)) {
document.write(iframe
+ "height='300'>");
}
else {
document.write(iframe
+ "height='450'>");
}
//-->
</script>
Naturalmente
implementeremo
questo script nel
body, nel punto in
cui vogliamo che
compaia il frame in
linea.
Concludo questa
panoramica sui frame
e sull'utilizzo
dell'oggetto parent
con la
raccomandazione di
non abusare dei
frame per la
creazione di siti,
le recensioni in
materia delle più
autorevoli fonti
competenti li
definiscono "poco
funzionali" e "poco
professionali".
LE CATEGORIE DI WEBMASTER
Add Url -
Affiliazioni -
Applet Java -
Barre -
Banner Swish -
Bottoni -
Chat Webmaster -
Contatori Accessi -
Corso Web Marketing -
Directory Italiane -
Directory Straniere -
Domini -
Forum -
Frecce -
Frame -
Frontpage -
Google Adsense -
Google Pagerank -
Google Search -
Guadagnare con un sito -
Guestbook -
Guida Java -
Html -
Html Editor -
Icone -
Meta Tags -
Midi Web -
Mini Icone -
Msn Search -
News -
Paint Sho Pro -
Photoshop -
Perl -
Posizionamento Sito -
Programmi Grafica -
Programmi Webmaster -
Promozione Sito -
Raccolta Java Script -
Realizzazione Siti -
Scambio Banner -
Sfondi -
Spazio Web -
Template Frontpage -
Template Swish -
Webmaster Tools -
Ws Ftp -
Yahoo Search |
