code js pour déterminer le type et la version du navigateur (avec plusieurs exemples de codes)_compétences javascript-js tutoriel-php.cn

Dans le développement front-end de sites Web, les problèmes de compatibilité des navigateurs nous ont déjà pressés. La naissance de Chrome nous causera encore plus de problèmes. La compatibilité des navigateurs est le premier problème à être résolu par le framework de développement front-end. Pour résoudre le problème de compatibilité, vous devez d'abord déterminer avec précision le type de navigateur et sa version.

JavaScript est le langage principal pour le développement front-end. Nous pouvons déterminer le type et la version du navigateur en écrivant des programmes JavaScript. Il existe généralement deux méthodes permettant à JavaScript de déterminer le type de navigateur. L'une est basée sur les attributs uniques de différents navigateurs et l'autre est déterminée en analysant l'attribut userAgent du navigateur. Dans de nombreux cas, une fois le type de navigateur déterminé par valeur, la version du navigateur doit être déterminée pour gérer les problèmes de compatibilité, et la version du navigateur ne peut généralement être connue qu'en analysant l'agent utilisateur du navigateur.

Analysons d’abord les caractéristiques des différents navigateurs et de leurs userAgents.

Seul IE prend en charge la création de contrôles ActiveX, il contient donc quelque chose que les autres navigateurs n'ont pas, à savoir la fonction ActiveXObject. Tant qu'il est déterminé que la fonction ActiveXObject existe dans l'objet fenêtre, il peut être clairement déterminé que le navigateur actuel est IE. Le userAgent typique pour chaque version d’IE est le suivant :

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

Parmi eux, le numéro de version est le numéro après MSIE.

Firefox

Chaque élément DOM dans Firefox a une fonction getBoxObjectFor, qui est utilisée pour obtenir la position et la taille de l'élément DOM (la fonction correspondante dans IE est la fonction getBoundingClientRect). Ceci est unique à Firefox. En le jugeant, vous pouvez savoir que le navigateur actuel est Firefox. Les userAgents de plusieurs versions de Firefox sont à peu près les suivants :

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
Où, le numéro de version est le numéro après Firefox.

Opéra

Opera fournit un indicateur de navigateur spécial, qui est l'attribut window.opera. Le userAgent typique d’Opera est le suivant :

Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; fr)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U ; fr) Opéra 8.0

Parmi eux, le numéro de version est un numéro proche d'Opera.

Safari

Le navigateur Safari a une fonction openDatabase que les autres navigateurs n'ont pas, qui peut être utilisée comme signe pour juger Safari. Un userAgent Safari typique est le suivant :

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

Le numéro de version est le numéro après Version.

Chrome

Chrome a une fonction MessageEvent, tout comme Firefox. Cependant, heureusement, Chrome ne dispose pas de la fonction getBoxObjectFor de Firefox. Selon cette condition, le navigateur Chrome peut toujours être déterminé avec précision. Actuellement, le userAgent de Chrome est :

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

Parmi eux, le numéro de version dans Chrome n'est que le numéro qui le suit.

Il est intéressant de noter que le userAgent de Chrome inclut également des fonctionnalités Safari. C'est peut-être la base sur laquelle Chrome permet d'exécuter toutes les applications du navigateur Apple.

Tant que nous comprenons les informations ci-dessus, nous pouvons déterminer le type de navigateur et sa version en fonction de ces caractéristiques. Nous enregistrerons les résultats du jugement dans l'espace de noms Sys et deviendrons les informations d'indicateur de base du cadre frontal pour les futurs programmes à lire. Si le navigateur est déterminé, l'espace de noms Sys aura un attribut avec le nom du navigateur et sa valeur est le numéro de version du navigateur. Par exemple, si IE 7.0 est déterminé, la valeur de Sys.ie est 7,0 ; si Firefox 3.0 est déterminé, la valeur de Sys.firefox est 3,0. Voici le code pour déterminer le navigateur :

[Ctrl A tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter

]

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

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

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

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

[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 détermine qu'il s'agit du navigateur IE
 alert('http://www.jb51.net' Sys.ie);
 if(Sys ie=='9.0'){//Js est jugé comme IE 9
 }else if(Sys.ie=='8.0'){//Js est jugé comme IE 8
 }else{. 
 }
 }
 if(Sys.firefox){//Js détermine qu'il s'agit du navigateur Firefox
 alert('http://www.jb51.net' Sys.firefox);
 }
 if(Sys.chrome){//Js détermine qu'il s'agit du navigateur Google Chrome
 alert('http://www.jb51.net' Sys.chrome);
 }
 if( Sys. opera){//Le jugement Js est le navigateur d'opéra 
 alert('http://www.jb51.net' Sys.opera);
 }
 if(Sys.safari){//Js jugement Pour le navigateur Apple Safari 
 alert('http://www.jb51.net' Sys.safari);
 }
}

Partagez une méthode de fonction pour obtenir le type de navigateur et le numéro de version du navigateur via jquery. Le code jquery spécifique est le suivant :

Copier le code Le code est le suivant :

$(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;}
alerte (bInfo);
});

jQuery À partir de la version 1.9, $.browser et $.browser.version ont été supprimés et remplacés par la méthode $.support. Si vous avez besoin d'en savoir plus sur $.support, veuillez vous référer à :

jQuery 1.9 utilise $.support au lieu de la méthode $.browser