Browser erkennen + Bild anzeigen

Lenhard

Mitglied
Hallo @ all,

Es ist schon eine Zeit her, seit dem ich hier das letzte mal etwas geschrieben/gefragt habe.

Nun stehe ich vor einem Problem und weiß nicht weiter:


Ich habe eine Seite erstellt, diese soll nun erkennen welchen browser und welche Version des Browsers verwendet wird. Davon abhängig soll ein bild angezeigt werden, oder nicht. z.B. soll wenn Internet Explorer 6 verwendet wird das bild (.png) nicht angezeigt werden.

Habt ihr eine Idee wie ich das machen kann?

Im Internet habe ich das hier gefunden:

<SCRIPT Language="JavaScript">
document.write('<align="center"><font face="Verdana" size="2"><b>');
document.write('Sie benutzen ');
if (navigator.userAgent.indexOf("Opera") != -1)
{
refer = "opera.html";
document.write('Opera');
}
else if (navigator.userAgent.indexOf("Netscape") != -1)
{
refer = "netscapelink.html";
document.write('Netscape Navigator');
}
else if (navigator.appName.indexOf("Internet Explorer") != -1)
{
refer = "msielink.html";
document.write('Internet Explorer');
}
else if (navigator.userAgent.indexOf("Firefox") != -1)
{
refer = "firefox.html";
document.write('Mozilla Firefox');
}
else
{
refer = "unbekannt.html";
document.write('Unbekannter Browser');
}
//an dieser Stelle könnte entsprechend umgeleitet werden:
//window.location = refer
</script>


Das erkennt zumindest mal den Browser. Jetzt müsste es nur noch zusätzlich die Version erkennen können. Und, da ich nicht viel Ahnung von dem ganzen habe, bräuchte ich noch Hilfe was das ein/ausblenden von einem Bild angeht.


Danke schon jetzt im Vorraus.
Lg Lenny
 
Hi,

wie schon von die gepostet, ermittelst du den Browser am besten über die Eigenschaft userAgent. Ebenso kannst du aus diesem String die jeweilige Versionsnummer parsen. Die kleine Klasse im Beispiel macht das für die Browser IE, Firefox, Opera und Safari (Win).

Ein Bild ein- bzw. ausblenden realisierst du am besten über das style-Objekt und der Eigenschaft display.

Beispiel:
Code:
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function BrowserDetection(){
  this.appName = "unbekannt";
  this.appVersion = "unbekannt";
  this.isIE = this.isFF = this.isOpera = this.isSafari = false;

  this.UA = navigator.userAgent.toLowerCase();

  // IE
  if(this.UA.search(/msie/) != -1){
    this.appName = "IE";
    this.isIE = true;
    this.appVersion = parseFloat(/(msie[^;]*)/.exec(this.UA)[0].split(" ")[1]);
  // Firefox
  }else if(this.UA.search(/opera/) != -1){
    this.appName = "Opera";
    this.isOpera = true;
    this.appVersion = parseFloat(/(opera[^\s]*)/.exec(this.UA)[0].split("/")[1]);
  // Firefox
  }else if(this.UA.search(/firefox/) != -1){
    this.appName = "Firefox";
    this.isFF = true;
    this.appVersion = parseFloat(/(firefox[^\s]*)/.exec(this.UA)[0].split("/")[1]);
  // Safari
  }else if(this.UA.search(/khtml/) != -1){
    this.appName = "Safari (Win)";
    this.isSafari = true;
    this.appVersion = parseFloat(/(version[^\s]*)/.exec(this.UA)[0].split("/")[1]);
  }
}

// BrowserDetection-Objekt erstellen
var objUA = new BrowserDetection();

window.onload = function(){
  // Ausgaben zum Browser
  document.getElementById("outID").innerHTML = "Browser: <br>";
  document.getElementById("outID").innerHTML += "("+((objUA.isIE)?"x":" ")+") IE<br>" + "("+((objUA.isFF)?"x":" ")+") FF<br>" + "("+((objUA.isOpera)?"x":" ")+") Opera<br>" + "("+((objUA.isSafari)?"x":" ")+") Safari";
  document.getElementById("outID").innerHTML += "<br><br>Version: " + objUA.appVersion;

  // Falls es sich um einen IE < 7.0 handelt -> Bild ausblenden
  if(objUA.isIE && (objUA.appVersion<7)){
    document.getElementById("imgID").style.display = "none";
  }
}
 //-->
</script>
</head>
<body>
<h1>Browsererkennung</h1>
<p>Erkannt werden IE, Firefox, Opera und Safari (Win) mit den zugehörigen Versionsnummern.</p>
<div id="outID"></div>

<h2>Bild ausblenden</h2>
<p>Das folgende Bild wird in IEs kleiner Version 7 nicht angezeigt.</p>
<div><img id="imgID" src="bild.png" alt="PNG"></div>
</body>
</html>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Moin,

ich weiß ja nicht, wie wichtig Dein Problem oder für welche Funktionen es gut ist...
Bedenken solltest Du, dass JavaScript aktiv sein muss, soll es en.
Weiterhin muss auch der userAgent übergeben werden. Einige Browser übergeben diesen nicht, die Nutzer haben die Übergabe abgeschaltet, oder geben vor, ein anderer Browser zu sein.
Die Ausfall- Fehlerquote dürfte im zweistelligen Bereich liegen.

Grüße,
Mikesch
 
Zurück