这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
浏览器对于我们来说,可能是最熟悉的工具了。在我们的产品开发过程中,经常要考虑浏览器兼容问题,以适应不同的用户人群,同时也减少因浏览器兼容问题所带来的服务量。所以检测浏览器的版本及类型就是很重要的一件事了,下面来一起看看用 Javascript 如何实现。
本文将介绍如何使用 Javascript 来检测浏览器的类型以及版本号,包括猎豹浏览器、搜狗浏览器、傲游浏览器、360 极速浏览器、360 安全浏览器、QQ 浏览器、百度浏览器、IE,Firefox,Chrome,safari,Opera 等。
效果图
实例代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>
- JavaScript判断浏览器类型及版本
- </title>
- <script type="text/javascript">
- /**
- * 获取浏览器类型以及版本号
- * 支持国产浏览器:猎豹浏览器、搜狗浏览器、傲游浏览器、360极速浏览器、360安全浏览器、
- * QQ浏览器、百度浏览器等.
- * 支持国外浏览器:IE,Firefox,Chrome,safari,Opera等.
- * 使用方法:
- * 获取浏览器版本:Browser.client.version
- * 获取浏览器名称(外壳):Browser.client.name
- * @author:xuzengqiang
- * @since :2015-1-27 10:26:11
- **/
- var Browser = Browser || (function(window) {
- var document = window.document,
- navigator = window.navigator,
- agent = navigator.userAgent.toLowerCase(),
- //IE8+支持.返回浏览器渲染当前文档所用的模式
- //IE6,IE7:undefined.IE8:8(兼容模式返回7).IE9:9(兼容模式返回7||8)
- //IE10:10(兼容模式7||8||9)
- IEMode = document.documentMode,
- //chorme
- chrome = window.chrome || false,
- System = {
- //user-agent
- agent: agent,
- //是否为IE
- isIE: /msie/.test(agent),
- //Gecko内核
- isGecko: agent.indexOf("gecko") > 0 && agent.indexOf("like gecko") < 0,
- //webkit内核
- isWebkit: agent.indexOf("webkit") > 0,
- //是否为标准模式
- isStrict: document.compatMode === "CSS1Compat",
- //是否支持subtitle
- supportSubTitle: function() {
- return "track" in document.createElement("track");
- },
- //是否支持scoped
- supportScope: function() {
- return "scoped" in document.createElement("style");
- },
- //获取IE的版本号
- ieVersion: function() {
- try {
- return agent.match(/msie ([\d.]+)/)[1] || 0;
- } catch(e) {
- console.log("error");
- return IEMode;
- }
- },
- //Opera版本号
- operaVersion: function() {
- try {
- if (window.opera) {
- return agent.match(/opera.([\d.]+)/)[1];
- } else if (agent.indexOf("opr") > 0) {
- return agent.match(/opr\/([\d.]+)/)[1];
- }
- } catch(e) {
- console.log("error");
- return 0;
- }
- },
- //描述:version过滤.如31.0.252.152 只保留31.0
- versionFilter: function() {
- if (arguments.length === 1 && typeof arguments[0] === "string") {
- var version = arguments[0];
- start = version.indexOf(".");
- if (start > 0) {
- end = version.indexOf(".", start + 1);
- if (end !== -1) {
- return version.substr(0, end);
- }
- }
- return version;
- } else if (arguments.length === 1) {
- return arguments[0];
- }
- return 0;
- }
- };
- try {
- //浏览器类型(IE、Opera、Chrome、Safari、Firefox)
- System.type = System.isIE ? "IE": window.opera || (agent.indexOf("opr") > 0) ? "Opera": (agent.indexOf("chrome") > 0) ? "Chrome":
- //safari也提供了专门的判定方式
- window.openDatabase ? "Safari": (agent.indexOf("firefox") > 0) ? "Firefox": 'unknow';
- //版本号
- System.version = (System.type === "IE") ? System.ieVersion() : (System.type === "Firefox") ? agent.match(/firefox\/([\d.]+)/)[1] : (System.type === "Chrome") ? agent.match(/chrome\/([\d.]+)/)[1] : (System.type === "Opera") ? System.operaVersion() : (System.type === "Safari") ? agent.match(/version\/([\d.]+)/)[1] : "0";
- //浏览器外壳
- System.shell = function() {
- //遨游浏览器
- if (agent.indexOf("maxthon") > 0) {
- System.version = agent.match(/maxthon\/([\d.]+)/)[1] || System.version;
- return "傲游浏览器";
- }
- //QQ浏览器
- if (agent.indexOf("qqbrowser") > 0) {
- System.version = agent.match(/qqbrowser\/([\d.]+)/)[1] || System.version;
- return "QQ浏览器";
- }
- //搜狗浏览器
- if (agent.indexOf("se 2.x") > 0) {
- return '搜狗浏览器';
- }
- //Chrome:也可以使用window.chrome && window.chrome.webstore判断
- if (chrome && System.type !== "Opera") {
- var external = window.external,
- clientInfo = window.clientInformation,
- //客户端语言:zh-cn,zh.360下面会返回undefined
- clientLanguage = clientInfo.languages;
- //猎豹浏览器:或者agent.indexOf("lbbrowser")>0
- if (external && 'LiebaoGetVersion' in external) {
- return '猎豹浏览器';
- }
- //百度浏览器
- if (agent.indexOf("bidubrowser") > 0) {
- System.version = agent.match(/bidubrowser\/([\d.]+)/)[1] || agent.match(/chrome\/([\d.]+)/)[1];
- return "百度浏览器";
- }
- //360极速浏览器和360安全浏览器
- if (System.supportSubTitle() && typeof clientLanguage === "undefined") {
- //object.key()返回一个数组.包含可枚举属性和方法名称
- var storeKeyLen = Object.keys(chrome.webstore).length,
- v8Locale = "v8Locale" in window;
- return storeKeyLen > 1 ? '360极速浏览器': '360安全浏览器';
- }
- return "Chrome";
- }
- return System.type;
- };
- //浏览器名称(如果是壳浏览器,则返回壳名称)
- System.name = System.shell();
- //对版本号进行过滤过处理
- System.version = System.versionFilter(System.version);
- } catch(e) {
- console.log("error");
- }
- return {
- client: System
- };
- })(window);
- alert(Browser.client.name + " " + Browser.client.version);
- </script>
- </head>
- <body>
- </body>
- </html>
总结
来源: http://www.phperz.com/article/17/0619/332395.html