supce's blog

JavaScript BOM 知识整理 (二)


navigator

navigator对象通常用于检测浏览器和识别操作系统的版本。
navigator中最重要的是userAgent属性,返回包含浏览器版本等信息的字符串,其次cookieEnabled也是很重要滴,使用它可以判断用户浏览器是否开启cookie。
下面的表格为常用的navigator属性,详细属性可以参考代码

属性 描述
appCodeName 浏览器代码名的字符串表示
appName 官方浏览器名的字符串表示
appVersion 浏览器版本信息的字符串表示
cookieEnabled 如果启用cookie返回true,否则返回false
javaEnabled 如果启用java返回true,否则返回false
platform 浏览器所在计算机平台的字符串表示
plugins 安装在浏览器中的插件数组
taintEnabled 如果启用了数据污点返回true,否则返回false
userAgent 用户代理头的字符串表示

以下为详细代码:

<script type="text/javascript">
    console.log("浏览器名称:" + navigator.appCodeName);
    console.log("次版本信息:" + navigator.appMinorVersion);
    console.log("完整浏览器名称:" + navigator.appName);
    console.log("浏览器的版本:" + navigator.appVersion);
    console.log("浏览器编译版本:" + navigator.buildID);
    console.log("是否启用cookie:" + navigator.cookieEnabled);
    console.log("CPU类型:" + navigator.cpuClass);
    console.log("是否启用Java:" + navigator.javaEnabled());
    console.log("浏览器主语言:" + navigator.language);
    console.log("浏览器中注册的MIME类型数组:" + navigator.mimeTypes);
    console.log("是否连接到网络:" + navigator.onLine);
    console.log("客户端计算机操作系统或者CPU:" + navigator.oscpu);
    console.log("浏览器所在系统平台:" + navigator.platform);
    console.log("浏览器中安装的插件信息数组:" + navigator.plugins);
    //console.log("用户的首选项:" + navigator.preference());
    console.log("产品名称:" + navigator.product);
    console.log("产品的次要信息:" + navigator.productSub);
    console.log("操作系统的语言:" + navigator.systemLanguage);
    console.log("用户代理字符串:" + navigator.userAgent);
    console.log("操作系统的默认语言:" + navigator.userLanguage);
    console.log("借以访问用户个人信息的对象:" + navigator.userProfile);
    console.log("浏览器的品牌:" + navigator.vendor);
    console.log("有关供应商的次要信息:" + navigator.vendorSub);
</script>

Chrome浏览器

IE浏览器


检测插件

有时候需要检测浏览器是否安装了某些插件,可以利用navigatorplugins属性来实现

function hasPlugin(name){
    var np = navigator.plugins;
    if(window.ActiveXObject){
        var activeObejctName = name + "." + name;
        try{
            var axobj = eval("new ActiveXObject(activeObejctName);");
            return axobj ? true : false;
        }catch(e){
            return false;
        }
    }else if(np && np.length){
        for(var i=0;i<np.length;i++){
            if(np[i].name.toLowerCase().indexOf(name.toLowerCase()) > -1){
                return true;
            }
        }
        return false;
    }else{
        return false;
    }
}
console.log(hasPlugin("Flash"));

screen对象

screen对象主要用于获取用户的屏幕信息。其主要的属性如下表:

属性 描述
availHeight 窗口可以使用的屏幕高度,单位像素
availWidth 窗口可以使用的屏幕宽度,单位像素
colorDepth 用户浏览器表示的颜色位数,通常为32位(每像素的位数)
pixelDepth 用户浏览器表示的颜色位数,通常为32位(每像素的位数)(IE不支持此属性)
height 屏幕的高度,单位像素
width 屏幕的宽度,单位像素

screen对象不是很常用,但有时候可以利用到availWidth和availHeight属性。
例如:可以使用下面的代码填充用户的屏幕

var win = window.open("","","width=100,height=100");
win.window.moveTo(0,0);
win.window.resizeTo(screen.availWidth,screen.availHeight);

history对象

history对象保存着用户上网的历史记录。

  1. go()方法
    • 参数为正时向前 history.go(2) //前进两页
    • 参数为负时向后
    • 参数为字符串时,会跳转到历史记录中包含该字符串的第一个位置(可能后退,也可能前进,具体要看哪个位置最近)如果历史记录中不包含该字符串,那么这个方法什么也不做
  2. back()方法,后退一页
  3. forward方法,前进一页