Importare applicazioni da Internet Explorer a Mozilla

  • Slug della versione: Importare_applicazioni_da_Internet_Explorer_a_Mozilla
  • Titolo della versione: Importare applicazioni da Internet Explorer a Mozilla
  • ID versione: 171344
  • Data di creazione
  • Autore: Vascaman
  • Versione corrente? No
  • Commento

Contenuto della versione

Introduzione

Quando Netscape diede vita al broswer Mozilla, fece la saggia decisione di supportare lo standard WC. Come risultato, Mozilla non è completamente retro compatibile con Netscape Navigator 4.x e Microsoft Internet Explorer; per esempio, Mozilla non supporta <layer>. I browsers, come Internet Explorer 4, che è stato costruito prima della concezione dello standard W3C ereditano qualche piccolo inconeniente.in questo articolo viene descritta la modalita quirk di Mozilla, che permette compatibilità retroattiva HTML con Internet Explorer e altri broswer.

Verranno inoltre discusse le tecnologie non standard come XMLHttpRequest e potenti editor testuali supportati da Mozilla poichè al tempo non c'era nulla di equivalente al W3C. Tra questi:

Trucchi generali per la stesura del codice fra broswer

Even though Web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform). Many browsers, such as Internet Explorer, also support pre-W3C APIs and have never added extensive support for the W3C-compliant ones.

Prima di addentrarci nelle differenze tra Mozilla e Internet Explorer, Diamo uno sguardo a delle tecniche di base con le quali si possono realizzare applicazioni Web aggiornabili per quanto riguarda la compatibilita' con i broswer


Partendo dal fatto che broswer diversi a volte utilizzano API diverse per la stessa funzionalita', possiamo trovare codice multiple if() else() blocchi nei quali il codice e' differente per ogni broswer. Il codice seguente mostra blocchi progettati per Internet Explorer:


. . . 

var elm; 

if (ns4) 
  elm = document.layers["myID"]; 
else if (ie4) 
  elm = document.all["myID"]

Il codice appena visto non e' estendibile, se vogliamo che sia supportato da un altro broswer, dobbiamo aggiornare il blocco dell'applicazione web.

Il modo piu' semplice per eliminare la riscrittura del codice per un nuovo broswer e' di astrarre le funzionalita'. Piuttosto che riscrivere piu' blocchi , si puo' incrementare l'efficenza astraendo le funzionalita' scrivendo il codice dell'applicazione solo una volta rendendolo oltretutto piu' leggibile e semplificandone l'aggiunta di nuovi componenti.

var elm = getElmById("myID"); 

function getElmById(aID){ 
  var element = null; 

  if (isMozilla || isIE5) 
    element = document.getElementById(aID);
  else if (isNetscape4) 
    element = document.layers[aID];
  else if (isIE4) 
    element = document.all[aID];

  return element; 
} 

Il codice riportato ha ancora il problema del "browser sniffing, ovvero deve determinare il broswer che l'user sta adottando. Questa tecnica di solito e' svolta dallo useragent:

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016 

Attraverso lo useragnet possiamo determinare quale broswer e' in uso e anche altre informazioni dettagliate, a volte si possono verificare degli errori quando ci troviamo nel caso di versioni appena uscite di un broswer, in questa situazione il codice cambia.

Se identificare il broswer non e' rilevante, puoi fare questo anche eseguendo un test in JavaScript sui requisiti delle funzionalita'.it is much better and more reliable to sniff by browser capability or object feature support.Per esempio, piuttosto che:

if (isMozilla || isIE5) 

Si potrebbe usare:

if (document.getElementById) 

Questo potrebbe permettere ad altri broswer che supportano W3C, come Opera o Safari, di lavorare senza cambiamenti.

Lo useragent, in ogni caso, makes sense when accuracy is important, come quando si verifica la compatibilita' tra un'applicazione web e il broswer o quando ci troviamo in presenza di un bug.

JavaScript permette anche regole condizionali, che aiutano la leggibilita' del codice:

var foo = (condition) ? conditionIsTrue : conditionIsFalse; 

Per esempio, per richiamare un elemento, si potrebbe utilizzare:

function getElement(aID){ 
  return (document.getElementById) ? document.getElementById(aID)
                                   : document.all[aID]);
} 

Un altro metodo e' quello di usare l'operatore <tt>||</tt> :

function getElement(aID){ 
  return (document.getElementById(aID)) || document.all[aID]);
}

Differenze tra Mozilla e Internet Explorer

Prima di tutto verrano discusse le differenze del comportamento di HTML tra Mozilla e Internet Explorer.

Tooltips

I broswer piu' antiquati introducono i tooltips in HTML mostrandoli sui links e usando alt attributi come requisiti dei tooltip. Le specifiche W3C HTML piu' recenti hanno dato vita agli attributi del tipo title, che rappresenta il contenuto della descrizione del link. I broswer moderni utilizzano l'attributo title per visualizzare tooltips, Mozilla supporta solamente l'attributo alt per la visualizzazione dei tooltips.

Entita'

L'HTML puo' contenere diverse entita', che sono definite in W3C web standards body. Si possono riferire entita' attraverso il carattere o il numero di riferimento. Per esempio, si puo' riferire il carattere spazio #160 con &#160; oppure con il suo carattere di riferimento equivalente &nbsp;.

Alcuni broswer meno recenti, come Internet Explorer, hanno qualche problema nella visualizzazione di ; :

&nbsp Foo 
&nbsp&nbsp Foo 

Mozilla visualizzera' il codice sopra &nbsp come spazi bianchi, anche se questo e' contro le specifiche W3C.Il broswer non analizzera' &nbsp se questo e' seguito da piu' caratteri, per esempio:

&nbsp12345 

Questo codice non ha effetto con Mozills, poiche' viola gli standard W3C. In ogni caso si puo' utilizzare (code>&nbsp;</code>) per colmare discrepanze del broswer.

Differenze DOM

Il Document Object Model (DOM) e' la struttura ad albero che contiene gli elementi del documento. E' manipolabile attraverso le API JavaScript, standardizzate dal W3C. In ogni caso, prima dello standard W3C, Netscape 4 e Internet Explorer 4 implementavano le API in maniera simile. Solo Mozilla implementa le API piu antiquate se non sono state incluse nello standard W3C.

Accedere agli elementi

Per richiamare il riferimento a un elemento usando l'approccio cross-broswer, si puo' usare document.getElementById(aID), che funziona in Internet Explorer 5.0+, sui broswer basati su Mozilla, "altri broswer aderenti al W3C".

Mozilla non supporta l'accesso ad un elemento attraverso document.elementName oppure attraverso il nome dell'elemnto, Internet Explorer permette quest'ultimo(chiamato anche global namespace polluting). Mozilla non supporta nemmeno il metodo per Netscape 4 document.layers e quello per Internet Explorer document.all. Mentre document.getElementById richiama un elemento, si puo' usare anche document.layers e document.all per ottenere la lista di tutti gli elementi documento che hanno un certo tag, per richiamare tutti gli elementi <div>. Il metofo del livello 1 del DOM permette di ottenere i riferimenti a tutti gli elementi con lo stesso tag usando getElementsByTagName().Il metodo restituisce un array in JavaScript, e puo' essere richiamato sull'elemento document o altri nodi per cercare nei loro sotto-alberi.Per ottenere un array di tutti gli elementi nel albero DOM, si puo' utilizzare getElementsByTagName("*"). I metodi del DOM livello 1, come mostrato nella tabella 1, sono comunemente usati per spostare elementi da una posizione e settarne la visibilita'(per menu, o animazioni).Netscape 4 usa il tag <layer>, che non e' supportato da Mozilla, come un elemento HTML che puo' essere posizionato ovunque. In Mozilla, si puo posizionare ogni elemento usando il tag <div>, che Internet Explorer supporta ed e' documentata nelle specifiche HTML.

Table 1. Methods used to access elements
Method Description
document.getElementById( aId ) Returns a reference to the element with the specified ID.
document.getElementsByTagName( aTagName ) Returns an array of elements with the specified name in the document.

Sorgente della versione

<h3 name="Introduzione">Introduzione</h3>
<p>Quando Netscape diede vita al broswer Mozilla, fece la saggia decisione di supportare lo standard WC. Come risultato, Mozilla non è completamente retro compatibile con Netscape Navigator 4.x e Microsoft Internet Explorer; per esempio, Mozilla non supporta  <code>&lt;layer&gt;</code>. I browsers, come Internet Explorer 4, che è stato costruito prima della concezione dello standard W3C ereditano qualche piccolo inconeniente.in questo articolo viene descritta la modalita quirk di Mozilla, che permette compatibilità retroattiva HTML con Internet Explorer e altri broswer.
</p><p>Verranno inoltre discusse le tecnologie non standard come XMLHttpRequest e potenti editor testuali supportati da Mozilla poichè al tempo non c'era nulla di equivalente al W3C. Tra questi: 
</p>
<ul><li><a class="external" href="http://www.w3.org/TR/html401/">HTML 4.01</a>, <a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a> and <a class="external" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a>
</li><li>Cascade Style Sheets (CSS): <a class="external" href="http://www.w3.org/TR/REC-CSS1">CSS Level 1</a>, <a class="external" href="http://www.w3.org/TR/CSS21/">CSS Level 2.1</a> and parts of <a class="external" href="http://www.w3.org/Style/CSS/current-work.html">CSS Level 3</a>
</li><li>Document Object Model (DOM): <a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/">DOM Level 1</a>, <a class="external" href="http://www.w3.org/DOM/DOMTR#dom2">DOM Level 2</a> and parts of <a class="external" href="http://www.w3.org/DOM/DOMTR#dom3">DOM Level 3</a>
</li><li>Mathematical Markup Language: <a class="external" href="http://www.w3.org/Math/">MathML Version 2.0</a>
</li><li>Extensible Markup Language (XML): <a class="external" href="http://www.w3.org/TR/REC-xml">XML 1.0</a>, <a class="external" href="http://www.w3.org/TR/REC-xml-names/">Namespaces in XML</a>, <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">Associating Style Sheets with XML Documents 1.0</a>, <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJ%20un/att-0074/01-NOTE-FIXptr-20010425.htm">Fragment Identifier for XML</a>
</li><li>XSL Transformations: <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0</a>
</li><li>XML Path Language: <a class="external" href="http://www.w3.org/TR/xpath">XPath 1.0</a>
</li><li>Resource Description Framework: <a class="external" href="http://www.w3.org/RDF/">RDF</a>
</li><li>Simple Object Access Protocol: <a class="external" href="http://www.w3.org/TR/soap">SOAP 1.1</a>
</li><li>ECMA-262, revision 3 (JavaScript 1.5): <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a>
</li></ul>
<h3 name="Trucchi_generali_per_la_stesura_del_codice_fra_broswer">Trucchi generali per la stesura del codice fra broswer</h3>
<p>Even though Web standards do exist, different browsers behave 
differently (in fact, the same browser may behave differently depending on 
the platform). Many browsers, such as Internet Explorer, also support 
pre-W3C APIs and have never added extensive support for the W3C-compliant 
ones.
</p><p>Prima di addentrarci nelle differenze tra Mozilla e Internet Explorer, 
Diamo uno sguardo a delle tecniche di base con le quali si possono realizzare applicazioni Web aggiornabili per quanto riguarda la compatibilita' con i broswer
</p><p><br>
Partendo dal fatto che broswer diversi a volte utilizzano API diverse per 
la stessa funzionalita', possiamo trovare codice multiple <code>if() else()</code>
blocchi nei quali il codice e' differente per ogni broswer.
Il codice seguente mostra blocchi progettati per Internet Explorer:
</p><p><br>
</p>
<pre>. . . 

var elm; 

if (ns4) 
  elm = document.layers["myID"]; 
else if (ie4) 
  elm = document.all["myID"]
</pre>
<p>Il codice appena visto non e' estendibile, se vogliamo che sia supportato da 
un altro broswer, dobbiamo aggiornare il blocco dell'applicazione web.
</p><p>Il modo piu' semplice per eliminare la riscrittura del codice per un nuovo broswer 
e' di astrarre le funzionalita'. Piuttosto che riscrivere piu' blocchi , si puo' incrementare
l'efficenza astraendo le funzionalita' scrivendo il codice dell'applicazione solo una volta
rendendolo oltretutto piu' leggibile e semplificandone l'aggiunta di nuovi componenti.
</p>
<pre>var elm = getElmById("myID"); 

function getElmById(aID){ 
  var element = null; 

  if (isMozilla || isIE5) 
    element = document.getElementById(aID);
  else if (isNetscape4) 
    element = document.layers[aID];
  else if (isIE4) 
    element = document.all[aID];

  return element; 
} 
</pre>
<p>Il codice riportato ha ancora il problema del "browser sniffing<i>, ovvero deve determinare il broswer che l'user sta adottando. Questa tecnica di solito e' svolta dallo useragent:</i>
</p>
<pre>Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016 
</pre>  
<p>Attraverso lo useragnet possiamo determinare quale broswer e' in uso e anche altre informazioni dettagliate, a volte si possono verificare degli errori quando ci troviamo nel caso di versioni appena uscite di un broswer,
in questa situazione il codice cambia.
</p><p>Se identificare il broswer non e' rilevante,
puoi fare questo anche eseguendo un test in JavaScript sui requisiti delle funzionalita'.<strong>it is much better and more reliable to sniff by browser capability or object feature support</strong>.Per esempio, piuttosto che:
</p>
<pre>if (isMozilla || isIE5) 
</pre>
<p>Si potrebbe usare:
</p>
<pre>if (document.getElementById) 
</pre> 
<p>Questo potrebbe permettere ad altri broswer che supportano W3C, come Opera o Safari, di lavorare senza cambiamenti.
</p><p>Lo useragent, in ogni caso, makes sense when accuracy is important, come quando si verifica la compatibilita' tra un'applicazione web e il broswer o quando ci troviamo in presenza di un bug.
</p><p>JavaScript permette anche regole condizionali, che aiutano la leggibilita' del codice:
</p>
<pre class="eval">var foo = (condition) ? conditionIsTrue : conditionIsFalse; 
</pre>
<p>Per esempio, per richiamare un elemento, si potrebbe utilizzare:
</p>
<pre class="eval">function getElement(aID){ 
  return (document.getElementById) ? document.getElementById(aID)
                                   : document.all[aID]);
} 
</pre>
<p>Un altro metodo e' quello di usare l'operatore <tt>||</tt> :
</p>
<pre class="eval">function getElement(aID){ 
  return (document.getElementById(aID)) || document.all[aID]);
}
</pre>
<h3 name="Differenze_tra_Mozilla_e_Internet_Explorer">Differenze tra Mozilla e Internet Explorer</h3>
<p>Prima di tutto verrano discusse le differenze del comportamento di HTML tra Mozilla e Internet Explorer.
</p>
<h4 name="Tooltips">Tooltips</h4>
<p>I broswer piu' antiquati introducono i tooltips in HTML mostrandoli sui links e usando <code>alt</code> attributi come requisiti dei tooltip.
Le specifiche W3C HTML piu' recenti hanno dato vita agli attributi del tipo <code>title</code>, che rappresenta il contenuto della descrizione del link. I broswer moderni utilizzano l'attributo <code>title</code> per visualizzare tooltips, Mozilla supporta solamente l'attributo <code>alt</code> per la visualizzazione dei tooltips.
</p>
<h4 name="Entita.27">Entita'</h4>
<p>L'HTML puo' contenere diverse entita', che sono definite in <a class="external" href="http://www.w3.org/TR/REC-html40/sgml/entities.html">W3C web standards body</a>. Si possono riferire entita' attraverso il carattere o il numero di riferimento. Per esempio, si puo' riferire il carattere spazio #160 con <code>&amp;#160;</code> oppure con il suo carattere di riferimento equivalente <code>&amp;nbsp;</code>.
</p><p>Alcuni broswer meno recenti, come Internet Explorer, hanno qualche problema nella visualizzazione di <code>;</code> :
</p>
<pre>&amp;nbsp Foo 
&amp;nbsp&amp;nbsp Foo 
</pre>
<p>Mozilla visualizzera' il codice sopra <code>&amp;nbsp</code> come spazi bianchi, anche se questo e' contro le specifiche W3C.Il broswer non analizzera' <code>&amp;nbsp</code> se questo e' seguito da piu' caratteri, per esempio:
</p>
<pre>&amp;nbsp12345 
</pre>
<p>Questo codice non ha effetto con Mozills, poiche' viola gli standard W3C. In ogni caso si puo' utilizzare  (code&gt;&amp;nbsp;&lt;/code&gt;) per colmare discrepanze del broswer.
</p>
<h3 name="Differenze_DOM">Differenze DOM</h3>
<p>Il Document Object Model (DOM) e' <b>la struttura ad albero che contiene gli elementi del documento</b>. E' manipolabile attraverso le API JavaScript, standardizzate dal W3C. In ogni caso, prima dello standard W3C, Netscape 4  e Internet Explorer 4 implementavano le API in maniera simile. Solo Mozilla implementa le API piu antiquate se non sono state incluse nello standard W3C.
</p>
<h4 name="Accedere_agli_elementi">Accedere agli elementi</h4>
<p>Per richiamare il riferimento a un elemento usando l'approccio cross-broswer, si puo' usare <code>document.getElementById(aID)</code>, che funziona in Internet Explorer 5.0+, sui broswer basati su Mozilla, "altri broswer aderenti al W3C".
</p><p>Mozilla non supporta l'accesso ad un elemento attraverso <code>document.elementName</code> oppure attraverso il nome dell'elemnto, Internet Explorer permette quest'ultimo(chiamato anche <em>global namespace polluting</em>).
Mozilla non supporta nemmeno il metodo per Netscape 4 <code>document.layers</code> e quello per Internet Explorer <code>document.all</code>.
Mentre <code>document.getElementById</code> richiama un elemento, si puo' usare anche <code>document.layers</code> e <code>document.all</code> per ottenere la lista di tutti gli elementi documento che hanno un certo tag, per richiamare tutti gli elementi <code>&lt;div&gt;</code>.
Il metofo del livello 1 del DOM permette di ottenere i riferimenti a tutti gli elementi con lo stesso tag usando <code>getElementsByTagName()</code>.Il metodo restituisce un array in JavaScript, e puo' essere richiamato sull'elemento <code>document</code> o altri nodi per cercare nei loro sotto-alberi.Per ottenere un array di tutti gli elementi nel albero DOM, si puo' utilizzare <code>getElementsByTagName("*")</code>.
I metodi del DOM livello 1, come mostrato nella tabella 1, sono comunemente usati per spostare elementi da una posizione e settarne la visibilita'(per menu, o animazioni).Netscape 4 usa il tag <code>&lt;layer&gt;</code>, che non e' supportato da Mozilla, come un elemento HTML che puo' essere posizionato ovunque. In Mozilla, si puo posizionare ogni elemento usando il tag <code>&lt;div&gt;</code>, che Internet Explorer supporta ed e' documentata nelle specifiche HTML.
</p>
<table class="standard-table">
<caption> Table 1. Methods used to access elements
</caption><tbody><tr>
<th> Method </th><th> Description
</th></tr>
<tr>
<td> document.getElementById( aId ) </td><td> Returns a reference to the element with the specified ID.
</td></tr>
<tr>
<td> document.getElementsByTagName( aTagName ) </td><td> Returns an array of elements with the specified name in the document.
</td></tr></tbody></table>
Ripristina questa versione