Revision 171343 of 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: 171343
  • 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]);
}

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>
Ripristina questa versione