Sito NetWork Gratis Italy

Simulare un iframe con Javascript

Spesso per la realizzazione di un sito si trova più comoda la scelta dei frame per migliorare la navigabilità del sito stesso e per evitare di appesantire il lavoro dei browser di molti utenti ancora non dotati di connessioni veloci. D'altra parte la scelta dei frame è sconsigliata per una serie di discorsi triti e ritriti. Possiamo tuttavia simulare un frame attraverso l'ausilio di un po di Javascript. Dotiamoci di un menu di navigazione che simuli un link all'interno di un frame:

<div>
    <a href="javascript:MenuIframe(1)">Mostra 1</a> |
    <a href="javascript:MenuIframe(2)">Mostra 2</a> |
    <a href="javascript:MenuIframe(3)">Mostra 3</a>
</div><br>

I link fanno riferimento ad una funzione Javascript che vedremo in seguito. Costruiamo adesso il nostro pseudo-frame assegnando ad un livello di testo il compito di fungere da iframe ed al suo interno specifichiamo diverse aree di contenuto, a loro volta contenute all'interno di altri livelli di testo a cui viene opportunamente assegnato un ID:

<div id="IFRAME">
    <span id="CONTENUTO_1">
        Contenuto del frame 1...<br>
        Contenuto del frame 1...<br>
        Contenuto del frame 1...<br>
        Contenuto del frame 1...<br>
        Contenuto del frame 1...<br>
        Contenuto del frame 1...<br>
        Contenuto del frame 1...<br>
        Contenuto del frame 1...<br>
        Contenuto del frame 1...<br>
        Contenuto del frame 1...<br>
    </span>
    <span id="CONTENUTO_2">
        Contenuto del frame 2...<br>
        Contenuto del frame 2...<br>
        Contenuto del frame 2...<br>
        Contenuto del frame 2...<br>
        Contenuto del frame 2...<br>
        Contenuto del frame 2...<br>
        Contenuto del frame 2...<br>
        Contenuto del frame 2...<br>
        Contenuto del frame 2...<br>
        Contenuto del frame 2...<br>
    </span>
    <span id="CONTENUTO_3">
        Contenuto del frame 3...<br>
        Contenuto del frame 3...<br>
        Contenuto del frame 3...<br>
        Contenuto del frame 3...<br>
        Contenuto del frame 3...<br>
        Contenuto del frame 3...<br>
        Contenuto del frame 3...<br>
        Contenuto del frame 3...<br>
        Contenuto del frame 3...<br>
        Contenuto del frame 3...<br>
    </span>
</div>

Sia a fini estetici che funzionali è indispensabile utilizzare un po di CSS, le cui fasi importanti sono evidenziate nel codice in grassetto:

div
{
    font-size: 11px;
    font-family: Verdana;
}
#IFRAME
{
    overflow: Auto;
    width: 300px;
    height: 100px;
    padding: 5px 5px 5px 5px;
    border: Solid 1px #000000;
}
#CONTENUTO_1, #CONTENUTO_2, #CONTENUTO_3
{
    visibility: Hidden;
    position: Absolute;
}

Impostiamo la barra di scorrimento ed un'altezza fissa al nostro pseudo-frame e nascondiamo i vari contenuti del frame, i quali si attiveranno solo al click sui rispettive voci di menu, grazie alla funzione Javascript di cui segue il codice:

function MenuIframe(MenuID)
{
    var x = document.getElementById;
    x("CONTENUTO_" + MenuID).style.visibility = "Visible";
    x("CONTENUTO_" + MenuID).style.position = "Relative";
    for (var i=1; i<4; i++)
    {
        if (i != MenuID)
        {
            x("CONTENUTO_" + i).style.visibility = "Hidden";
            x("CONTENUTO_" + i).style.position = "Absolute";
        }
    }
}

La funzione accetta un parametro che à l'ID dell'area di contenuto che intendiamo visualizzare; attraverso le funzioni del DOM rendiamo visibile il contenuto dell'area desiderata ed andiamo a nascondere, con un ciclo ed una condizione di controllo, le altre aree di contenuto.