Hvilken nettleser
Det er i prinsipp tre strategier å følge:
- Vi kan la websiden identifisere nettleseren og splitte koden basert på denne informasjonen. Dette er risikabelt siden vi må sitte med kode for en lang rekke mulige nettleserversjoner. Nye versjoner kan velte strategien vår.
- Vi kan la tjeneren avgjøre hvilken nettleser som har sendt en forspørsel og sende tilbake en side som er tilpasset denne nettleseren. Denne strategien er sammenlignbar med den første.
- Vi kan teste eksistensen av de objektene og funksjonene vi ønsker å bruke og
bruke dem hvis de finnes. Hvis vi ikke finner noe vi kan bruke kan vi gi
en melding om dette. Denne strategien er å foretrekke når vi skal lage
dynamiske vevsider. Det er i hovedsak denne strategien som blir brukt i dette materialet.
F.eks er følgende en kodebit som forsøker å sette opp en HTTPRequest (AJAX) for ulike typer nettlesere:
var myRequest=null; if (window.XMLHttpRequest) myRequest = new XMLHttpRequest();//IE7+ og andre nettlesere else if (window.ActiveXObject) { try { myRequest = new ActiveXObject("Msxml2.XMLHTTP");//IE6 } catch(e) { try {myRequest= new ActiveXObject("Microsoft.XMLHTTP");//IE5.5 } catch(e) {alert('could not establish request');} } }Vi ser at vi bruker både if og try-catch for å sjekke om en egenskap finnes.
Nedenfor ser vi på noen muligheter for å finne ut vilken nettleser som leser siden, uten tanke på å skrive dynamisk HTML. Vi ser både på nettleserens mulighet for å "kjenne seg selv", og tjenerens mulighet for å identifisere spørreren.
Klienten vet det
Vi kan bruke informasjon i objektet navigator som vi når fra JavaScript på klienten selv.
JavaScriptet er slik:
function who(targetid)
{
var useragent = navigator.userAgent;
S='';
elt=document.getElementById(targetid);
if(useragent!=null)
{
S+='klienten sier:<br/>';
S+='<b>'+ navigator.userAgent + '</b>';
}
else
S='Finner ikke ut av det';
elt.innerHTML=S;
}
Tjeneren vet det
Tjeneren vet en masse om vilken "useragent" eller nettleser som henvender seg for å få lastet opp en vevside. Nedenfor finner du demonstrasjon av hvordan vi kan få tilbake informasjon fra en Linux/apache server via et Pythonscript og fra en Microsoft Server via et asp-script.
Microsofts IIS og asp
Hva sier serveren. Vi spør med asp-kode:
<%
Option Explicit
%>
<html>
<head>
<title>Who asked</title>
</head>
<body>
<h2>Server says: </h2>
<%
Response.Write Request.ServerVariables("HTTP_USER_AGENT")
%>
</body>
</html>
Dette er resultatet:
Linux Apache og python
Dette scriptet returnerer det det vet om html-fila som spør:
#! /usr/bin/python2.3
import os, string
print """Content-type: text/html
<html>
<head>
<title>Who asked</title>
</head>
<body>
<h2>Server says</h2>
<p>
"""
print str(os.environ['HTTP_USER_AGENT'])
print """
</body>
</html>
"""
Dette er resultatet:
IE
Vi kan altså plukke opp den ønskede informasjonen i Javascript på klienten selv eller vi kan finne det vi ønsker med skriptet på tjeneren. Hva hvis vi ikke skriver dynamiske sider ved hjelp av Javascript og ikke bruker noen tjenerstøtte ?
Storparten av de problemer vi møter med kompatibilitet mellom nettelesere skyldes Microsoft Internett Explorer. Det er derfor utviklet et par kommentarformater som kan hjelpe oss å identifisere Microsoft Internet Explorer og lage HTML- eller CSS-fragmenter eller Javascript kode som er spesielle for IE.
Se på følgende to formuleringer:
-
<!--[if IE]> Hei du bruker (IE5 eller høyere). <![endif]-->
-
<![if !IE]> Hei du bruker ikke IE. <![endif]>
Den første er en komplett kommentar som ignoreres av alle andre nettlesere enn MSIE. Den andre plukkes også opp av MSIE og innholdet ignoreres fordi vi har sagt !IE (not IE), men alle andre lesere viser fram teksten: "Hei du bruker ikke IE.". Den siste fungerer fordi alle andre lesere ignorerer de to meningsløse taggene over og under teksten.
Problemet med formulering 2 er at den ikke validerer som strict XHTML. Formulering 1 derimot validerer fordi det er ren kommentarsyntaks. Det ser ut til at vi kan reformulere uttrykk 2 slik for å få det til å validere:
<--![if !IE]><--> Hei du bruker ikke IE. <!--><![endif]>
Merk at vi kan spesifisere vilken MSIE verson vi spør etter ved å sette versjonsnummeret etter IE, feks.:
<!--[if IE 6]> Hei du bruker IE versjon 6. <![endif]-->
Og vi kan bruke lt (less than), gt(greater than), lte (less or equal), gte(greater or equal) for å sjekke versjonsnummer. F.eks.:
<!--[if lt IE 6]> Dette er en tidligere versjon av IE enn versjon 6 <![endif]-->
Du kjører forresten ikke Microsoft Internet Explorer
Det kan være delte meninger om en skal bruke slike produsentavhengige finurligheter. Argumentet for er at så lenge vi bruker MS triks til å overkomme MS mangler så blir det så og si i familien. Argumentet mot er selvsagt at vi roter oss inn i løsninger som blir sårbare og lite vedlikeholdbare. En bruksmåte som er ganske vanlig er å inkludere CSS som er nødvendig for å få IE til å vise HTML som andre lesere.
Et vanlig eksempel som introduserer HTML5 elementer til IE versjoner før versjon 9 er slik:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<style>
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
<![endif]-->
Nedenfor finner du noen eksempler på egne sider. Kopier kildekoden, rediger dem og teste dem i forskjellige nettlesere for å se effekten:
- En enkel side som sier fra om nettleseren, men som ikke validerer:
- En enkel side som sier fra om nettleseren, og validerer:
- En enkel side som setter en egen stil(CSS) for IE:
- En enkel side som gjør det samme, men med include:
- ... du kan jo forsøke å lage flere eksempler
