第十六章 浏览器检测

浏览器检测

要点:

  • navigator对象
  • 客户端检测

Navigator

Navigator 属性

属性 说明
appCodeName 返回浏览器的代码名
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的user-agent 头部的值

Navigator 对象方法

方法 描述
javaEnabled() 指定是否在浏览器中启用Java
taintEnabled() 规定浏览器是否启用数据污点(data tainting)
/**
 * navigator对象是window对象下的
*/

// console.log(window.navigator);
// Navigator {vendorSub: "", productSub: "20030107", vendor: "Google Inc.", maxTouchPoints: 0, hardwareConcurrency: 4, …}

// console.log(navigator.appName);
// chrome,safari下显示 Netscape  返回浏览器的名称 这个属性不能精确取到浏览器名称

console.log(navigator.appVersion);
// 5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36

console.log(navigator.userAgent);
// 用户代理字符串
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36

console.log(navigator.platform);
// 浏览器所在系统
// MacIntel

浏览器嗅探器

就是一段js程序,比如browserdetect.js文件。

var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {     string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Internet Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();

//使用方法:
BrowserDetect.browser;// 浏览器的名称,例如Firefox,IE
BrowserDetect.version;//浏览器的版本,比如,7、11
BrowserDetect.OS;//浏览器所宿主的操作系统,比如Windows、Linux

navigator检测浏览器插件:

属性 含义
name 插件名
filename 文件名
description 描述
console.log(navigator.plugins);
// 插件检测
// PluginArray {0: Plugin, 1: Plugin, 2: Plugin, Chrome PDF Plugin: Plugin, Chrome PDF Viewer: Plugin, Native Client: Plugin, length: 3}

for (let i = 0; i < navigator.plugins.length; i++) {
    document.write('插件名' + navigator.plugins[i].name + '<br>');
    document.write('文件名' + navigator.plugins[i].filename + '<br>');
};
// 插件名Chrome PDF Plugin
// 文件名internal-pdf-viewer
// 插件名Chrome PDF Viewer
// 文件名mhjfbmdgcfjbbpaeojofohoefgiehjai
// 插件名Native Client
// 文件名internal-nacl-plugin

可以用此种方法检测是否有falsh插件。

客户端检测

客户端检测一共分为三种,分别为:能力检测、怪癖检测和用户代理检测。通过这三种检测方案,我们可以充分的了解当前浏览器所处系统、所支持的语法、所具有的特殊性能。

  • 能力检测

    能力检测又称作特性检测,检测的目标不是特定的浏览器,而是识别浏览器的能力。能力检测不必估计特定的浏览器,只需要确定当前浏览器是否支持特定的能力,就可以得出可行的结局方案;

    const width = window.innerWidth;
    
    // ie兼容
    if (typeof width != 'number') {
        // 标准模式
        if (document.compatMode == 'CSSCompat') {
            width = document.documentElement.clientWidth;
        }
        // 非标准模式
        else {
            width = document.body.clientWidth;
        }
    }
    
  • 怪癖检测bug(缺陷)

    与能力检测类似,怪癖检测的目标是识别浏览器特殊行为。但与能力检测确认浏览器支持什么能力不同。怪癖检测是想要知道浏览器有什么缺陷。

    bug一般属于个别浏览器独有。在大多数新版本浏览器被修复。

    例如 ie低级浏览器,toString重名

  • 用户代理检测

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   浏览器提供商虽然在实现公共接口方面投入了很多精力,但结果仍然是每一种浏览器都有各自的长处,也都有各自的缺点。即...
    霜天晓阅读 3,203评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,964评论 1 45
  •   ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript,那么...
    霜天晓阅读 4,338评论 0 0
  • 1.条件注释 IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解。比如普通的HTML注...
    初入前端的小菜鸟阅读 1,690评论 0 3
  • 我们向来如此,给别人的机会比给自己机会要多得多,可能对自己那么苛刻也是希望有一天能收获想得到的感情吧,孤独是...
    Echo拉赫拉阅读 2,472评论 0 0