JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Con Mozilla il codice è più complesso, perché la proprietà innerText non è più supportata e dobbiamo ricorrere a qualche altro espediente. Fortunatamente, però, il W3C ci offre un'ampia gamma di strumenti per accedere agli elementi della pagina.

In particolare, per passare dalla visualizzazione dell'HTML, ci basterà utilizzare i metodi createTextNode e appendChild.

Il metodo createTextNode permette di creare un nuovo nodo di testo. La stringa da inserire in tale nodo sarà, ovviamente, il codice contenuto nell'iframe. Per ricavarcelo possiamo continuare ad utilizzare innerHTML. createTextNode ci restituisce il riferimento al nodo di testo creato.

Il metodo appendChild inserisce il nuovo nodo. Come nel caso di innerText, con appendChild i tag non vengono interpretati come codice ma come semplice testo. L'unico problema è che questo metodo non rimpiazza il testo preesistente, ma inserisce il nuovo nodo alla fine della lista dei figli del nodo al quale è applicato. Questo problema è però presto risolto: prima di utilizzare il metodo ripuliamo il riquadro ponendo il suo innerHTML uguale a stringa vuota.

Vediamo ora come ritornare alla visualizzazione del testo formattato. Il procedimento è un po' più complesso.

Il metodo createRange crea un oggetto TextRange, che rappresenta un intervallo di testo.

Il metodo selectNodeContents imposta a un intervallo di testo di contenere il contenuto di un nodo. Quindi imposta al nostro oggetto TextRange il testo contenuto nel riquadro. Infine, convertendo il nostro oggetto in stringa, lo inseriamo all'interno del riquadro con il metodo innerHTML che già conosciamo.

Differenze nella creazione del codice HTML

Abbiamo visto come per arrivare agli stessi risultati in Mozilla e in Internet Explorer siamo dovuti riccorre a codici molto a sé stanti. Occorre a questo punto precisare, però, che la maggiore differenza tra i due browser è data dall'HTML generato nel documento editabile: mentre Internet Explorer produce i vari tag HTML (em, i, ecc.), Mozilla 1.3 genera tag di tipo span contenenti regole CSS.

Ad esempio se scriviamo nel riquadro di testo "HTML.IT" e clicchiamo sui tasti "Grassetto", "Corsivo" e "Sottolineato", con IE otterremo il seguente codice:

<strong><em><u>HTML.it</u></em></strong>

Mentre con Mozzilla avremo il più attuale:

<span style="font-weight: bold; font-style: italic; text-decoration: underline;">HTML.IT</span>

Altri articoli

Altre guide

Altre newsletter