Lezione 3D e 3E: Cookies in Javascript - il tag Iframe e l'uso di Frameset

Lezione 3D e 3E: Cookies in Javascript - il tag Iframe e l'uso di Frameset 



Cookie in Javascript

Più volte su queste pagine abbiamo affrontato l'argomento della gestione dei cookie generalmente facendo riferimento a linguaggi di scripting lato server come ad esempio PHP. E' bene ricordare, invece, che è possibile manipolare i cookie validamente anche attraverso istruzioni lato client. In questa lezione della nostra guida, infatti, ci occuperemo di introdurre il lettore alla possibilità di gestire e manipolare i cookie all'interno di una comune pagina HTML mediante Javascript.

Per chi non lo sapesse (cosa ci fate su Mr.Webmaster?) i cookie sono dei piccoli file di testo che vengono creati sul computer client durante la navigazione di talune pagine web al fine di memorizzare delle informazioni utili all'esperienza di navigazione dell'utente. Mediante i cookie è possibile, ad esempio, memorizzare delle preferenze di navigazione, dei dati di accesso, informazioni sulle pagine visitate, ecc.

I cookie, come appena detto, sono dei banalissimi file di testo il cui contenuto deve seguire una sintassi ben precisa:


nome_cookie=valore_cookie; expires=data di scadenza in formato UTC; path=dominio e percorso in cui è attivo il cookie


Gli elementi costitutivi di un cookie sono, quindi, tre:
l'accoppiata "nome del cookie" = "valore del cookie";
la scadenza (facoltativa) in formato UTC;
il path (facoltativo) dato dal dominio più il percorso;

Se non viene specificata una scadenza il cookie verrà cancellato al termine della sessione di navigazione che lo ha creato. Se non viene specificato il path il browser dovrebbe impostarlo automaticamente per il dominio ed il percorso corrente. Per utilizzare il cookie su tutto il sito generalmente si usa:


path=/


Il linguaggio Javascript, come avrete intuito, è in grado di manipolare i cookie con una certa dimestichezza. Grazie alla proprietà document.cookie, infatti, ci è possibile creare, leggere, modificare e cancellare i cookie attraverso una comune pagina HTML (cioè senza fare ricorso ai linguaggi di scripting lato server). Facciamo un esempio di creazione di cookie:

document.cookie = 'mio_nome=Massimiliano; expires=True, 23 June 2009 22:47:11 UTC; path=/'


Con la stringa di codice qui sopra ho creato un semplice cookie chiamato mio_nome con valore Massimiliano; per modificarne il valore sarebbe sufficiente ripetere la medesima operazione assegnando un nuovo valore.

In realtà le operazioni sui cookie con Javascript sono meno intuitive e semplici di quanto lo siano con altri linguaggi; Javascript, infatti, non dispone di funzioni ad hoc per la manipolazione dei cookie... ma dove non arriva il linguaggio, arriva il programmatore! Vediamo quindi come crearci da soli un set di funzioni per la gestione lato-client dei cookie


Creare un cookie

Per creare un cookie è consigliabile avere a portata di mano una funzione ad hoc. Di seguito la funzione che sono solito utilizzare io:

function scriviCookie(nomeCookie,valoreCookie,durataCookie)

{

var scadenza = new Date();

var adesso = new Date();

scadenza.setTime(adesso.getTime() + (parseInt(durataCookie) * 60000));

document.cookie = nomeCookie + '=' + escape(valoreCookie) + '; expires=' + scadenza.toGMTString() + '; path=/';

}

La nostra funzione richiede tre semplici argomenti:
il nome del cookie che si desidera creare;
il valore da assegnare al cookie che si va creando;
la durata del cookie espressa in minuti (trascorso il tempo indicato il browser cancellerà il cookie in quanto scaduto).

Supponiamo di voler creare un semplice cookie che scada dopo un'ora dalla sua creazione:


scriviCookie('mio_nome','massimiliano',60);

La medesima funzione può essere utilizzata anche per effettuare delle modifiche su un cookie già esistente; per farlo sarà sufficiente ripetere l'operazione inserendo al primo argomento della nostra funzione il nome del cookie che si desidera modificare:

scriviCookie('mio_nome','Luca',60);

Il cookie mio_nome (che avevo già creato in precedenza) orà avrà come valore Luca al posto di Massimiliano.

Leggere i cookie

La lettura di un cookie con Javascript richiede un procedimento piuttosto complesso e davvero poco intuitivo; per questo motivo una funzione ad hoc sembra davvero irrinunciabile. Vediamola:
function leggiCookie(nomeCookie)

{

if (document.cookie.length > 0)

{

var inizio = document.cookie.indexOf(nomeCookie + "=");

if (inizio != -1)

{

inizio = inizio + nomeCookie.length + 1;

var fine = document.cookie.indexOf(";",inizio);

if (fine == -1) fine = document.cookie.length;

return unescape(document.cookie.substring(inizio,fine));

}else{

return "";

}

}

return "";

}

La nostra funzione effettua, in sostanza, una serie di passaggi per andare ad individuare il valore assegnato al cookie specificato in argomento. Vediamo un esempio di utilizzo:
var nome = leggiCookie('mio_nome');

document.write('Il tuo nome è: ' + nome);


Nel caso del cookie creato all'esempio precedente l'output sarà:

Il tuo nome è: Luca


Cancellare un cookie

La procedura di cancellazione di un cookie può essere gestita mediante una funzione a ciò preposta che, a sua volta, farà nuovamente ricorso alla fondamentale funzione scriviCookie() vista in precdenza:

function cencellaCookie(nomeCookie)

{

scriviCookie(nomeCookie,'',-1);

}

In sostanza il cookie viene modificato mediante l'assegnazione di un valore vuoto (nessun valore) ed una scadenza negativa (cookie già scaduto). Per cancellare un cookie utilizzeremo quindi:

cancellaCookie('mio_nome');


Verificare che il browser accetti i cookie

Altra operazione piuttosto frequente negli script che fanno utilizzo dei cookie è la verifica circa l'accettazione o meno degli stessi da parte del browser. Non tutti i browser, infatti, accettano i cookie e, pertanto, è opportuno effettuare delle verifiche preliminari con Javascript prima di lanciare le operazioni sui cookie. Per effettuare una simile verifica, ancora una volta, vi suggerisco di utilizzare una funzione apposita come questa:

function verificaCookie()

{

document.cookie = 'verifica_cookie';

var testcookie = (document.cookie.indexOf('verifica_cookie') != -1) ? true : false;

return testcookie;

}



In sostanza la funzione prova a creare un cookie e subito dopo verifica se il cookie è stato creato o meno. Di seguito un esempio di funzionamento:

var test = verificaCookie();

if (test == true) alert('Il tuo browser accetta i cookie!');

else alert('I biscotti non ti piacciono :-(');



Scaricate l'intero set di funzioni Javascript per la manipolazione dei cookie

Per praticità vi invito a scaricare l'intero set di funzioni che trovate già pronto all'uso all'interno di questa pagina. L'unica cosa che dovete fare è scaricare lo ZIP e decomprimerlo; al suo interno troverete il file cookies.js che dovrete caricare sul vostro spazio web e poi richiamare all'interno di tutte le pagine del vostro sito attraverso le quali desiderate compiere operazioni di manipolazione dei cookie:

<script src="cookies.js"></script>

Una volta linkato il file contenente le funzioni queste saranno liberamente utilizzabili nei modi visti sopra.



Iframe

Questo esempio mostra come creare un iframe: 
<iframe src="pagina1.htm" width="200" height="200" scrolling="auto" frameborder="1">

La pagina corrente utilizza i frame. Questa caratteristica non è supportata dal browser in uso.
<a href="pagina1.htm">Clicca qui</a>
</iframe>



Nell'esempio sopra riportato "pagina1.htm" è la pagina web richiamata all'interno del frame; width è la larghezza, mentre height è l'altezza del frame. Lo scroller è automatico (scrolling="auto") e il bordo è pari ad un pixel (frameborder="1").

Il resto è l'avviso di mancata compatibilità per i browser che non supportano il tag Iframe.

Per una trattazione dettagliata sul tag Iframe suggerisco di leggere questa referenza.



Altra spiegazione su I-frame

Oltre ai frame tradizionali esistono i frame in linea costituiti dal tag iframe (il nome del tag corrisponde, appunto, alla contrazione di inline frame).

Non si tratta di frameset ma di elementi veri e propri della pagina che, in quanto tali, possono essere inseriti tra i vari tag del <body" di un comune documento HTML. Mentre nel frameset abbiamo una cornice che "mette insieme" diversi documenti HTML, infatti, con gli iframe si realizzano delle finestre su altre pagine all'interno di una normalissima pagina web all'interno della quale possiamo trovare, testi, immagini, tabelle, ecc.

Il tag iframe è supportato da tutti i moderni browser, solo i browser molto vecchi (come ad esempio Netscape 4) possono avere dei problemi di visualizzazione per questo tag. Al giorno d'oggi, tuttavia, eventuali incompatibilità possono essere considerate davvero irrilevanti, essendo i vecchi browser praticamente scomparsi dal mercato. Al fine di mantenere una piena compatibilità, tuttavia, è possibile inserire un testo alternativo da mostrare nel caso in cui il rowser non supporti il tag. Questo testo va inserito tra i tag <iframe> e </iframe>:


<iframe ... >

Qui scrivo il testo per i browser che non supportano gli <iframe>

</iframe>

Quanto usare un iframe?

Il tag iframe è utilizzato di frequente per includere all'interno di una pagina web elementi esterni, ad esempio di altri siti web, come video o banner pubblicitari. In questo modo il designer del documento HTML non deve preoccuparsi di gestire elementi complessi come Javascript o Flash ma può limitarsi ad "aprire una finestra" su un documento remoto che si occupa di gestire, in autonomia, gli effetti che si desidera includere nel documento.

Gli attributi del tag iframe

Vediamo un esempio e supponiamo di voler inserire (all'interno di una ipotetica pagina "index.html") un banner pubblicitario erogato da un sito terzo:

<html>

<head>

<title>I frame HTML</title>

</head>

<body>

<h1>Articolo di esempio </h1>

<p>...</p>

<p>...</p>

<iframe src="http://www.sitoesterno.ext/banner.php?partner=123" width="728> height="90"></iframe>

<p>...</p>

<p>...</p>

</body>

</html>



L'attributo fondamentale del tag iframe è src che, esattamente come accade per altri tag come <img>, serve per indicare il percorso (locale o assoluto) della risorsa che si desidera includere nella pagina. Oltre a questo, il tag in questione prevede gli attributi:
height e width (per definire le dimensioni in altezza e larghezza; le dimensioni s'intendono in pixel);
frameborder (valore numerico corrispondente allo spessore di eventuale bordo);
marginwidth e marginheight (margine in larghezza e in altezza);
scrolling (indica se mostrare o meno le barre di scorrimento all'interno del iframe; può avere come valori: auto, yes, no);

Ad esclusione di width ed height, gli altri attributi del tag iframe sono oggi deprecapi nell'HTML5.

Per quanto riguarda l'aspetto del tag è possibile utilizzare l'attributo style o assegnare una classe di stilizzazione attraverso l'uso dei CSS.



I Frame HTML: creare un frameset
I frame sono delle "finestre" all'interno delle quali vengono visualizzate altre pagine web. Si tratta, in sostanza, di una sorta di sistema di inclusione attraverso il quale più pagine web possono essere composte insieme come in un puzzle e presentate all'utente all'interno di una cornice che prende il nome di frameset.

La tecnica dei frameset - adifferenza degli iframe che verranno trattati nella seconda parte di questa lezione - può considerarsi obsoleta e, come tale, certamente non adatta ad un moderno web-design. Nonostante ciò, per motivi di completezza didattiva, è bene ricordare questa tecnica ed i tag coinvolti nella creazione di pagine web di questo tipo.

Continua dopo la pubblicità...
I Frameset

A livello di codice HTML un frameset non ha corpo ma solo i riferimenti alle pagine che completano la "composizione". Vediamo un semplice esempio:

 <html>
<head>
<title>I frame HTML</title>
</head>
<frameset rows="100,*">
<frame src="intestazione.html" name="intestazione">
<frameset cols="200,*">
<frame src="sommario.html" name="sommario">
<frame src="contenuto.html" name="contenuto">
</frameset>
</frameset>
</html>


E' possibile notare che in questo codice HTML manca il tag <body> dato che, abbiamo detto, un frameset non necessita di un corpo, essendo una pagina contenitrice di altre pagine. Nello specifico del nostro esempio la pagina è composta da tre diversi documenti HTML disposti attraverso due frameset tra loro annidiati:



I due frameset utilizzati svolgono i seguenti compiti:
il primo frameset taglia la pagina in due orizzontalmente: la prima "fetta" è alta 100 pixel e la seconda occupa lo spazio restante;
il secondo frameset riempi la seconda "fetta" definita dal primo frameset e la taglia verticalmente in due colonne: la prima di 200 pixel e la seconda per lo spazio restante in larghezza.

Da un punto di vista sintattico il tag frameset, come abbiamo visto nel nostro esempio, accetta i valori rows e cols per specificare, rispettivamente, l'altezza e la larghezza occupata da un frame. Tale dimensione può essere specificata in pixel (come nell'esempio) oppure in percentuale; come avrete intuito il valore asterisco (*) indica "tutto lo spazio residuo".

Per fare un esempio di dimensioni specificate in percentuale si supponga di voler dividere una pagina un 4 colonne uguali:

<frameset cols="25%,25%,25%,25%">
...
...
...
...
</frameset>



Il tag <frame>


Nel tag frame (annidiato dentro ad un frameset) va specificato il percorso della pagina (un documento HTML standard) da includere ed un nome per il frame stesso. E' importante sapere che un link che deve puntare da un frame verso un'altro frame ha bisogno dell'attributo target per indicare il frame di destinazione, appunto, specificando il nome ad esso assegnato.

Tornando al nostro esempio potremmo inserire questo link nel codice html del frame "sommario" per modificare la pagina visualizzata nel frame "contenuto": 


<a href="pagina.html" target="contenuto">Pagina...</a>

E' da sottolineare che, per correttezza, dovrebbe essere utilizzato l'attributo ID e non "name", tuttavia, si tratta di una prassi largamente diffusa che garantisce una piena compatibilità anche con i browser più datati.
Il tag <noframes>


Un tag particolare, che merita menzione in questa lezione dedicata ai frameset, è il tag <noframes>.

Questo tag può essere utilizzato all'interno di un frameset (insieme, cioè, ai vari tag <frame>) per specificare un contenuto da mostrare agli utenti che navigano utilizzando un browser privo del supporto per i frames. Ecco un esempio:
<frameset rows="100,*">
<frame src="intestazione.html" name="intestazione">
<frame src="contenuto.html" name="contenuto">
<noframes>Il tuo browser non supporta i frames</noframes>
</frameset>


Fonte originale:

https://www.mrwebmaster.it/javascript/creare-leggere-cancellare-cookie-javascript_7448.html
https://www.mrwebmaster.it/html/frame-in-linea_11775.html
https://www.mrwebmaster.it/html/frameset_9458.html

Commenti

Post popolari in questo blog

Simulazioni di reti (con Cisco Packet Tracer)

Esercizi sulla rappresentazione della virgola mobile IEEE 754 (Floating Point)