Oggetto Navigator e Cross-Browser Scripting

1. Oggetto Navigator e Cross-Browser Scripting Roberto Bruni e Daniela Giorgetti

2. Script per tutti • Gli script visti sinora vanno bene per (la maggior parte de)i browser più diffusi • In seguito vedremo che NN e IE presentano incompatibilità su alcune scelte implementative (es. layers e DHTML) • Possiamo cercare di limitare le incompatibilità usando JS ed in particolare l’oggetto navigator Bruni e Giorgetti

3. Oggetto navigator • Rappresenta il browser in uso • Permette di ottenere informazioni su nome e versione (e altro) • Supportato da N.N. e I.E. • Ha due oggetti figli (supportati solo da NN): Plugin e Mimetype • Ogni browser può avere proprietà non standard • o anche rendere scrivibili proprietà di sola lettura (IE generalmente molto permissivo) Bruni e Giorgetti

4. navigator: proprietà fondamentali navigator.appCodeName // “Mozilla” per NN2/3/4 e IE3/4 navigator.appName // “Netscape” per NN e “Microsoft Internet Explorer” per IE navigator.platform // sistema operativo dove gira il browser, es. “Win32”, “MacPPC” navigator.appVersion //descrizione più completa della piattaforma e del browser navigator.userAgent //stringa inviata dal browser ai server nelle richieste di pagine web Bruni e Giorgetti

5. Eseguire azioni in base al browser if (navigator.userAgent.indexOf(“Mozilla/4”) == -1) { window.location = “non_Netscape_4_x.html”; }// Manda a una URL diversa da quella corrente gli utenti che non usano Netscape 4.x • Cosa succede se accediamo la pagina con IE5.5? navigator.userAgent == “Mozilla/4.0 (compatible; MSIE 5.5… • Perché? • Patto segreto tra Netscape e Microsoft? • Cospirazione Governativa? • Netscape si è infiltrato nel campus di Redmond della Microsoft? • All’epoca della “guerra dei browser” NN3.0 vs IE3.0 era comune incappare in pagine “NN only” gestite da JS! • Soluzione di IE4.0: Mozilla compatible • Notare anche la versione 4 invece che 5 (molti script usavano il test visto sopra) • Ironicamente vennero incrementate le statistiche di mercato di NN Bruni e Giorgetti

6. Netscape più onesto? • Non tanto… con NN6.0? navigator.userAgent == “Mozilla/5… navigator.appVersion == “5… • Perché? • Netscape 5.0 versione open source alla base di Netscape 6. • Che lezione ne possiamo trarre? • cautela, cautela e ancora cautela nel diversificare le pagine • provare ad accedere le pagine con più browser possibili • Uso pratico: controllare almeno appName e appVersion • userAgent meno affidabile perché passato sempre ai server Bruni e Giorgetti

7. Soluzione brutale • Scegliere una versione di un browser e supportare solo quella cacciando gli “intrusi” if (navigator.appName.indexOf(“Netscape”) == -1 || navigator.appVersion.indexOf(“5.0”) == -1) { alert(“Scarica Netscape o rinuncia al mio sito!”); window.location = “http://www.netscape.com”; } • Consigli • Cercate di essere più gentili (pochi utenti lo saranno con voi) • Supportate più browser che potete, magari rinunciando a qualche pulsante elegante o qualche animazione • Le pagine web dovrebbero avere più diffusione possibile Bruni e Giorgetti

8. Soluzione standard • Accontentate almeno gli utenti NN5/6 e IE4/5 con pagine ad hoc • Usate una pagina di default per tutti gli altri if (navigator.appName.indexOf(“Netscape”) > -1 && navigator.appVersion.indexOf(“5”) > -1) { window.location = “pagina_netscape5x_6x.html”; } if (navigator.appName.indexOf(“Microsoft”) > -1 && navigator.appVersion.indexOf(“4”) > -1) { window.location = “pagina_iexplorer4x_5x.html”; } window.location = “pagina_default.html”; Bruni e Giorgetti

9. Soluzione raffinata • Fare una sola pagina che accontenti tutti • L’idea è di settare opportunamente una variabile e testarla quando si vogliono accedere caratteristiche particolari (usarla come parametro degli script) • Si complica molto il codice, ma resta più facile da aggiornare • Vedremo esempi di questa soluzione usando DOM e DHTML var browser= “OTH”; if (parseInt(navigator.appVersion) >= 5 || navigator.appVersion.indexOf(“MSIE 5”) != -1 || navigator.appVersion.indexOf(“MSIE 6”) != -1) { browser = “DOM”; } else { if (navigator.userAgent.indexOf(“Mozilla/4”) != -1) { if (navigator.appName.indexOf(“Netscape”) != -1) { browser = “NS4”; } if (navigator.appVersion.indexOf(“MSIE 4”) != -1) { browser = “IE4”; } } } Bruni e Giorgetti

10. navigator: linguaggio utente navigator.language // lingua di default del browser, es. “en”, “it”, “fr”, “fr_CA”, etc. (solo NN4+) navigator.systemLanguage // lingua di default (solo IE4+) navigator.userLanguage // lingua dell’utente (solo IE4+) Bruni e Giorgetti

11. Pagine multi-language • Stesse soluzioni viste nel caso dei browser, ma adattate al linguaggio • Si può riconoscere prima il browser e poi andare a testare il linguaggio usando le proprietà opportune a seconda che si tratti di NN o di IE • Il pericolo è che il linguaggio del browser non sia quello veramente preferito dall’utente • Magari sta usando il browser lontano da “casa” • Oppure sta utilizzando l’ultimissima versione, non ancora disponibile nella sua lingua Bruni e Giorgetti

12. Quiz riassuntivi • Sapreste suggerire una soluzione salomonica al problema del linguaggio in cui visualizzare la pagina? • Cosa NON si può fare con JS? • spedire gli utenti Netscape ad un’altra pagina • spedire gli utenti Internet Explorer ad un’altra pagina • spedire gli utenti che usano browser che non implementano JS ad un’altra pagina • spedire gli utenti maleducati a quel… sito (o a fare un giro su web) • Come si fa ad aggiornare il browser di un visitatore della pagina? • non si può • con navigator.browser = “Netscape 6.0”; • con window.location = “www.rottamazione.com”; • con document.display = “Mozilla 2002”; Bruni e Giorgetti

13. Esercizi Bruni e Giorgetti