Oggetto Navigator e
Cross-Browser Scripting
Roberto Bruni e Daniela Giorgetti
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
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
} }
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
10
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
11
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
12
Esercizi
Bruni e Giorgetti
13