js-Code zur Bestimmung des Browsertyps und der Browserversion (mit mehreren Beispielcodes)_Javascript-Kenntnisse

Bei der Website-Frontend-Entwicklung haben uns Browserkompatibilitätsprobleme bereits in Eile gebracht. Die Geburt von Chrome wird uns noch mehr Probleme bereiten. Die Browserkompatibilität ist das erste Problem, das vom Front-End-Entwicklungsframework gelöst werden muss. Um das Kompatibilitätsproblem zu lösen, müssen Sie zunächst den Browsertyp und seine Version genau bestimmen.

JavaScript ist die Hauptsprache für die Frontend-Entwicklung. Wir können den Typ und die Version des Browsers bestimmen, indem wir JavaScript-Programme schreiben. Es gibt im Allgemeinen zwei Methoden für JavaScript, um den Browsertyp zu bestimmen. Eine basiert auf den eindeutigen Attributen verschiedener Browser und die andere wird durch die Analyse des userAgent-Attributs des Browsers bestimmt. In vielen Fällen muss nach der Wertbestimmung des Browsertyps die Browserversion ermittelt werden, um Kompatibilitätsprobleme zu lösen. Die Browserversion kann im Allgemeinen nur durch Analyse des UserAgents des Browsers ermittelt werden.

Lassen Sie uns zunächst die Eigenschaften verschiedener Browser und ihrer UserAgents analysieren.

IE

Nur ​​der IE unterstützt die Erstellung von ActiveX-Steuerelementen, daher verfügt er über etwas, das andere Browser nicht haben, nämlich die ActiveXObject-Funktion. Solange festgestellt wird, dass die ActiveXObject-Funktion im Fensterobjekt vorhanden ist, kann eindeutig festgestellt werden, dass der aktuelle Browser IE ist. Der typische UserAgent für jede IE-Version lautet wie folgt:

Mozilla/4.0 (kompatibel; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (kompatibel; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (kompatibel; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (kompatibel; MSIE 5.0; Windows NT)

Unter diesen ist die Versionsnummer die Nummer nach MSIE.

Firefox

Jedes DOM-Element in Firefox verfügt über eine getBoxObjectFor-Funktion, mit der die Position und Größe des DOM-Elements ermittelt wird (die entsprechende Funktion im IE ist die getBoundingClientRect-Funktion). Dies gibt es nur bei Firefox. Wenn Sie es beurteilen, können Sie erkennen, dass der aktuelle Browser Firefox ist. Die UserAgents verschiedener Firefox-Versionen lauten ungefähr wie folgt:

Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla /5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12
Wobei die Versionsnummer die Nummer nach Firefox ist.

Oper

Opera bietet ein spezielles Browser-Flag, das window.opera-Attribut. Der typische UserAgent von Opera lautet wie folgt:

Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U ; de) Opera 8.0

Unter diesen ist die Versionsnummer eine Nummer, die der von Opera ähnelt.

Safari

Der Safari-Browser verfügt über eine OpenDatabase-Funktion, die andere Browser nicht haben und die als Zeichen für die Beurteilung von Safari verwendet werden kann. Ein typischer Safari-Benutzeragent sieht wie folgt aus:

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, wie Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU wie Mac OS X) AppleWebKit/420.1 (KHTML, wie Gecko) Version/3.0 Mobile/4A93 Safari/419.3

Die Versionsnummer ist die Nummer nach Version.

Chrom

Chrome verfügt über eine MessageEvent-Funktion, Firefox jedoch auch. Glücklicherweise verfügt Chrome jedoch nicht über die getBoxObjectFor-Funktion von Firefox. Unter dieser Bedingung kann der Chrome-Browser dennoch genau bestimmt werden. Derzeit ist der UserAgent von Chrome:

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, wie Gecko) Chrome/0.2.149.27 Safari/525.13

Dabei ist die Versionsnummer in Chrome nur die Nummer danach.

Interessanterweise enthält der UserAgent von Chrome auch Safari-Funktionen. Möglicherweise ist dies die Grundlage für Chrome, um alle Apple-Browseranwendungen auszuführen.

Solange wir die oben genannten Informationen verstehen, können wir anhand dieser Merkmale den Browsertyp und seine Version bestimmen. Wir werden die Beurteilungsergebnisse im Sys-Namespace speichern und zu den grundlegenden Flag-Informationen des Front-End-Frameworks werden, damit zukünftige Programme sie lesen können. Wenn der Browser bestimmt ist, verfügt der Sys-Namespace über ein Attribut mit dem Namen des Browsers und sein Wert ist die Versionsnummer des Browsers. Wenn beispielsweise IE 7.0 ermittelt wird, beträgt der Wert von Sys.ie 7,0; wenn Firefox 3.0 ermittelt wird, beträgt der Wert von Sys.firefox 3,0. Im Folgenden finden Sie den Code zur Bestimmung des Browsers:

[Strg A alles auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen

]

我们把对IE的判断放在第一，因为IE的用户最多，其次是判断Firefox。按使用者多少的顺序来判断浏览器类型，可以提高判断效率，少做无用功。之所以将Chrome放在第三判断，是因为我们预测Chrome很快会成为市场占有率第三的浏览器。其中，在分析浏览器版本时，用到了正则表达式来析取其中的版本信息。

如果你的JavaScript玩得很高，你还可以将前面的判断代码写成这样：

<script type="text/javascript"> var Sys = {}; var ua = navigator.userAgent.toLowerCase(); window.ActiveXObject ? Sys.ie = ua.match(/msie ([\d.]+)/)[1] : document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] : window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] : window.opera ? Sys.opera = ua.match(/opera.([\d.]+)/)[1] : window.openDatabase ? Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0; //以下进行测试 liehuo.net if(Sys.ie) document.write('IE: '+Sys.ie); if(Sys.firefox) document.write('Firefox: '+Sys.firefox); if(Sys.chrome) document.write('Chrome: '+Sys.chrome); if(Sys.opera) document.write('Opera: '+Sys.opera); if(Sys.safari) document.write('Safari: '+Sys.safari); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这样可以使JavaScript代码更精简些。当然，可读性稍差一些，就看你是重视效率还是重视可维护性了。

使用不同特征来判断浏览器的方法，虽然在速度上比用正则表达式分析userAgent要来的快，不过这些特征可能会随浏览器版本而变化。比如，一种浏览器本来独有的特性取得了市场上的成功，其他浏览器也就可能跟着加入该特性，从而使该浏览器的独有特征消失，导致我们的判断失败。因此，相对比较保险的做法是通过解析userAgent中的特征来判断浏览器类型。何况，反正判断版本信息也需要解析浏览器的userAgent的。

通过分析各类浏览器的userAgent信息，不难得出分辨各类浏览器及其版本的正则表达式。而且，对浏览器类型的判断和版本的判断完全可以合为一体地进行。于是，我们可以写出下面的代码：

<script type="text/javascript"> var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0; //以下进行测试 liehuo.net if (Sys.ie) document.write('IE: ' + Sys.ie); if (Sys.firefox) document.write('Firefox: ' + Sys.firefox); if (Sys.chrome) document.write('Chrome: ' + Sys.chrome); if (Sys.opera) document.write('Opera: ' + Sys.opera); if (Sys.safari) document.write('Safari: ' + Sys.safari); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

其中，采用了“... ? ... : ...”这样的判断表达式来精简代码。判断条件是一条赋值语句，既完成正则表达式的匹配及结果复制，又直接作为条件判断。而随后的版本信息只需从前面的匹配结果中提取即可，这是非常高效的代码。

以上的代码都是为了打造前端框架所做的预研，并在五大浏览器上测试通过。今后，判断某种浏览器只需用if(Sys.ie)或if(Sys.firefox)等形式，而判断浏览器版本只需用if(Sys.ie == '8.0')或if(Sys.firefox == '3.0')等形式，表达起来还是非常优雅的。

前端框架项目已经启动，一切就看过程和结果了...

脚本之家小编又为大家整理了几个代码：

复制代码 代码如下:

var Browser=new Object();
Browser.isMozilla=(typeof document.implementation!='undefined')&&(typeof document.implementation.createDocument!='undefined')&&(typeof HTMLDocument!='undefined');
Browser.isIE=window.ActiveXObject ? true : false;
Browser.isFirefox=(navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
Browser.isSafari=(navigator.userAgent.toLowerCase().indexOf("safari")!=-1);
Browser.isOpera=(navigator.userAgent.toLowerCase().indexOf("opera")!=-1);
function check(){
 alert(Browser.isIE?'ie':'not ie');
 alert(Browser.isFirefox?'Firefox':'not Firefox');
 alert(Browser.isSafari?'Safari':'not Safari');
 alert(Browser.isOpera?'Opera':'not Opera');
}
window.onload=check;

复制代码 代码如下:

function isBrowser(){
var Sys={};
var ua=navigator.userAgent.toLowerCase();
var s;
(s=ua.match( /msie ([d.] )/))?Sys.ie=s[1]:
(s=ua.match(/firefox/([d.] )/))?Sys.firefox=s[ 1]:
(s=ua.match(/chrome/([d.] )/))?Sys.chrome=s[1]:
(s=ua.match(/opera.([ d.] )/))?Sys.opera=s[1]:
(s=ua.match(/version/([d.] ).*safari/))?Sys.safari=s[1 ]:0;
if(Sys.ie){//Js stellt fest, dass es sich um einen IE-Browser handelt
warning('http://www.jb51.net' Sys.ie);
if(Sys . ie=='9.0'){//Js wird als IE 9
}else if(Sys.ie=='8.0'){//Js wird als IE 8
}else{ beurteilt
}
}
if(Sys.firefox){//Js stellt fest, dass es sich um einen Firefox-Browser handelt
warning('http://www.jb51.net' Sys.firefox);
}
if(Sys.chrome){//Js stellt fest, dass es sich um den Google Chrome-Browser handelt
warning('http://www.jb51.net' Sys.chrome);
}
if( Sys. opera){//Js Urteil ist Opera Browser
Alert('http://www.jb51.net' Sys.opera);
}
if(Sys.safari){//Js Urteil Für Apple Safari Browser
warning('http://www.jb51.net' Sys.safari);
}
}

Teilen Sie eine Funktionsmethode, um den Browsertyp und die Browserversionsnummer über jquery abzurufen. Der spezifische JQuery-Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

$(document).ready(function( ){
varbrow=$.browser;
varbInfo="";
if(brow.msie){bInfo="MicrosoftInternetExplorer" brow.version;}
if(brow.mozilla){bInfo ="MozillaFirefox " brow.version;}
if(brow.safari){bInfo="AppleSafari" brow.version;}
if(brow.opera){bInfo="Opera" brow.version;}
Warnung (bInfo);
});

jQuery Ab Version 1.9 wurden $.browser und $.browser.version entfernt und durch die Methode $.support ersetzt. Weitere Informationen zu $.support finden Sie unter:

jQuery 1.9 verwendet die Methode $.support anstelle der Methode $.browser