Maison interface Web js tutoriel JQUERY1.6 使用方法四 检测浏览器_jquery

JQUERY1.6 使用方法四 检测浏览器_jquery

May 16, 2016 pm 05:59 PM
jquery 浏览器

userAgent = navigator.userAgent,//User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。

下面分别是各个浏览器的navigator.userAgent

//Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1 --safari

//Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.220 Safari/535.1 --chrome

//Opera/9.80 (Windows NT 5.1; U; Edition Next; zh-cn) Presto/2.8.158 Version/11.50 --opera

//Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1; .NET4.0C; .NET4.0E; InfoPath.2) ---ie

//Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.24) Gecko/20111103 Firefox/3.6.24 --firefox



//用于匹配响应浏览器表示的正则

rwebkit = /(webkit)[ \/]([\w.]+)/,//webkit
ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,//opera
rmsie = /(msie) ([\w.]+)/,//ie
rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,//mozilla



通过userAgent,我们可以看到chrome可以通过以下方式匹配到,但是因为和safari一样,都带有“safari”,我们可以把它放在rwebkit.前进行匹配

rchrome=/(Chrome)[ \/]([\w.]+)/

同样firefox也可以这么做,把它放在rmozilla前面进行判断

rfirefox=/(Firefox)[ \/]([\w.]+)/



uaMatch: function( ua ) {//主要是获得的浏览器的类型和版本
ua = ua.toLowerCase();//参数为navigator.userAgent。转换成小写,当然也可以在正则匹配里声明不区分大小写(如 /(webkit)[ \/]([\w.]+)/i)

var match = rwebkit.exec( ua ) ||
ropera.exec( ua ) ||
rmsie.exec( ua ) ||
ua.indexOf("compatible") [];//由于使用exec进行匹配,返回的结果是一个整体匹配和响应的子匹配,例如/(Chrome)[ \/]([\w.]+)/,match会返回Chrome/13.0.782.220,match[1]得到chrome,match[2]得到13.0.782.220;

return { browser: match[1] || "", version: match[2] || "0" };
}

//uaMatch是jQuery里的一个方法,在这边开始调用并保存浏览器型号browser和版本version

browserMatch = jQuery.uaMatch( userAgent );//调用uaMatch,并返回对象return { browser: match[1] || "", version: match[2] || "0" };
if ( browserMatch.browser ) {
jQuery.browser[ browserMatch.browser ] = true;//chrome\safari\opera\msie\mozilla ,比如我们要在opera浏览器下执行特定操作的时候,可以通过$.browser.opera来判断是不是opera浏览器(true,false)

jQuery.browser.version = browserMatch.version;//浏览器版本
}


if ( jQuery.browser.webkit ) {
jQuery.browser.safari = true;//因为safari是使用AppleWebKit引擎,由于和chrome都有safari,所以在做另外处理
}

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment réaliser un effet d'écart sur la disposition de la carte et des coupons avec fond de gradient? Comment réaliser un effet d'écart sur la disposition de la carte et des coupons avec fond de gradient? Apr 05, 2025 am 07:48 AM

Réalisez l'effet d'écart de la disposition des coupons de carte. Lors de la conception de la disposition des coupons de carte, vous rencontrez souvent la nécessité d'ajouter des lacunes sur les coupons de carte, surtout lorsque l'arrière-plan est le gradient ...

Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web? Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web? Apr 05, 2025 pm 10:33 PM

En utilisant récemment des fichiers de police installés localement dans les pages Web, j'ai téléchargé une police gratuite à partir d'Internet et je l'ai installée avec succès dans mon système. Maintenant...

Comment obtenir des données d'application et de visionneuse en temps réel sur la page de travail 58.com? Comment obtenir des données d'application et de visionneuse en temps réel sur la page de travail 58.com? Apr 05, 2025 am 08:06 AM

Comment obtenir des données dynamiques de la page de travail 58.com tout en rampant? Lorsque vous rampez une page de travail de 58.com en utilisant des outils de chenilles, vous pouvez rencontrer cela ...

Pourquoi les marges négatives ne prennent-elles pas effet dans certains cas? Comment résoudre ce problème? Pourquoi les marges négatives ne prennent-elles pas effet dans certains cas? Comment résoudre ce problème? Apr 05, 2025 pm 10:18 PM

Pourquoi les marges négatives ne prennent-elles pas effet dans certains cas? Pendant la programmation, les marges négatives dans CSS (négatif ...

Comment personnaliser le symbole de redimensionnement via CSS et le rendre uniforme avec la couleur d'arrière-plan? Comment personnaliser le symbole de redimensionnement via CSS et le rendre uniforme avec la couleur d'arrière-plan? Apr 05, 2025 pm 02:30 PM

La méthode de personnalisation des symboles de redimension dans CSS est unifiée avec des couleurs d'arrière-plan. Dans le développement quotidien, nous rencontrons souvent des situations où nous devons personnaliser les détails de l'interface utilisateur, tels que l'ajustement ...

Le texte sous la disposition Flex est omis mais le conteneur est ouvert? Comment le résoudre? Le texte sous la disposition Flex est omis mais le conteneur est ouvert? Comment le résoudre? Apr 05, 2025 pm 11:00 PM

Le problème de l'ouverture des conteneurs en raison d'une omission excessive du texte sous disposition flexible et de solutions est utilisé ...

Comment utiliser CSS et Flexbox pour implémenter la disposition réactive des images et du texte à différentes tailles d'écran? Comment utiliser CSS et Flexbox pour implémenter la disposition réactive des images et du texte à différentes tailles d'écran? Apr 05, 2025 pm 06:06 PM

Implémentation de dispositions réactives à l'aide de CSS lorsque nous voulons implémenter des modifications de mise en page sous différentes tailles d'écran dans la conception Web, CSS ...

See all articles