第39节 navigator、screen对象-零点程序员

本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

navigator对象：

通过navigator对象，可以获取当前使用的是上面浏览器，浏览器的版本号，浏览器是否支持Java，当前浏览器有哪些插件（Plug-ins）可用等信息，根据这些信息可以定制一些自定义行为或进行相应的处理；

navigator对象是window对象的属性；

最早由Navigator2.0引入的navigator对象，现已成为识别客户端浏览器的事实标准；一般用来检测浏览器及操作系统；

其他浏览器也通过其他方式提供了相同或相似的信息，如，IE中的window.clientInformation和Opera的window.opera，但navigator对象是所有支持javascript的浏览器所共有的；但不同浏览器中的navigator对象都有一些不同的属性；

var sum=0;
for(var p in navigator){
    sum++;
    document.write(p + "<br/>");
}
document.write(sum);

属性或方法：

• appCodeName：浏览器的名称；通常是Mozilla，即使在非Mozilla也是如此
• appMinorVersion：次版本信息
• appName：完整的浏览器名称；
• appVersion：浏览器的版本；一般不与实际的浏览器版本对应；
• builddID：浏览器编译版本
• cookieEnabled：表示cookie是否启用
• cpuClass：客户端计算机中使用的cpu类型（x86、68K、Alpha、PPC或Other）
• javaEnabled()：表示当前浏览器是否启用了java
• language：浏览器的主语言
• mimeTypes：在浏览器中注册的MIME类型数组
• online：表示浏览器是否连接到了因特网
• opsProfile：已不使用
• oscpu：客户端计算机的操作系统或使用的CPU
• platform：浏览器所在的系统平台
• plugins：浏览器中安装的插件信息的数组
• preference()：设置用户的首选项
• product：产品名称，如Gecko
• productSub：关于产品的次要信息，如Gecko的版本
• register-ContentHandler()：已经废弃；针对特定的MIME类型将一个站点注册为处理程序
• register-ProtocolHandler()：针对特定的协议将一个站点注册为处理程序
• securityPolicy：已经废弃；安全策略的名称
• systemLanguage：操作系统的名称
• taintEnabled()：已经废弃；表示是否允许变量被修改
• userAgent：浏览器的用户代理字符串
• userLanguage：操作系统的默认语言
• userProfile：借以访问用户个人信息的对象
• vendor：浏览器的品牌
• verdorSub：有关供应商的次要信息，这些属性通常用于检测显示网页的浏览器类型；

浏览器嗅探在有些时候还是必要的，比如，当需要解决存在于某个特定的浏览器的特定版本中的特殊的bug时，此时就可以使用navigator某些属性来获取当前浏览器的版本信息，比如：

appName：Web浏览器的全称；在低版本的IE中，返回“Microsoft Internet Explorer”；在Firefox等其它浏览器中，返回“Netscape”；

appVersion：此属性通常以数字开始，并跟着包含浏览器厂商和版本信息字符串；字符串前面的数字通常是4.0或5.0，表示它是第4或第5代兼容的浏览器；appVersion字符串没有标准的格式，所以，没有办法直接用它来判断浏览器的类型；

userAgent：浏览器在HTTP头部中发送的字符串，该属性通常包含appVersion中的所有信息，并且常常也可能包含其他的细节；它也没有标准格式；但由于它包含浏览器的绝大部分信息，因此浏览器嗅探通常使用它；

platform：操作系统平台的字符串；

检测浏览器内核及版本号：

// 检测浏览器内核及版本号
var brower = (function(){
    var s = navigator.userAgent.toLowerCase();
    var match = /(webkit)[\/]([\w.]+)/.exec(s) ||
                /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(s) ||
                /(msie) ([\w.]+)/.exec(s) ||
                !/compatible/.test(s) &&
                /(mozilla)(?:.*? rv:([\w.]+))?/.exec(s) ||
                [];
    return {name: match[1] || "", version: match[2] || "0"};
}());
console.log(navigator.userAgent);
console.log(brower);

检测操作系统：

所有 Windows 版本的操作系统都会包含 “Win”字符串，所有 Macintosh 版本的操作系统都会包含“Mac”字符串，所有 Unix 版本的操作系统都会包含有“X11”，而 Linux 操作系统会同时包含“X11”和“Linux”；

["Win","Mac","X11","Linux"].forEach(function(t){
    (t == "X11") ? t = "Unix" : t; // 处理Unix系统
    // 为navigator对象扩展专用系统检测方法
    navigator["is" + t] = function(){
        return navigator.userAgent.indexOf(t) != -1;
    };
});
console.log(navigator.isWin());
console.log(navigator.isMac());
console.log(navigator.isLinux());
console.log(navigator.isUnix());

特征检测法：

特征检测法就是根据浏览器是否支持特定的功能来决定相应操作的方式；这是一种非精确判断法，但却是最安全的检测方法，因为准确检测浏览器的类型和型号是一件很困难的事情，而且很容易存在误差；如果不关心浏览器的身份，仅仅在意浏览器的执行能力，那么使用特征检测法就完全可以满足需要；

if(document.getElementsByName)
    var a = document.getElementsByName("test");
else if(document.getElementsByTagName)
    var a = document.getElementsByTagName("a");
console.log(a);
 
function getXMLHttpRequest(url){
    var xhr = null;
    if(window.XMLHttpRequest)
        xhr = new XMLHttpRequest();
    else
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    if(xhr != null){
        // 开始请求提交
        alert("提交成功");
    }else{
        alert("你的浏览器不支持XMLHTTP");
    }
}
getXMLHttpRequest();

当使用一个对象、方法或属性时，先判断它是否存在；如果存在，则说明浏览器支持该对象、方法或属性，那么就可以放心使用；这是目前最主流的一种检测方式；

除了浏览器厂商和版本信息的属性之外，navigator对象还包含一些杂项的属性和方法，如以下这些属性，已经得到广泛的应用但未标准化；

• onLine：表示浏览器当前是否连接到网络；应用程序可能希望在离线状态下把状态保存到本地；
• geolocation：用于确定用户地理位置信息的API；
• javaEnabled()：一个非标准的方法，当浏览可以运行Java小程序时返回ture；
• cookieEnable()：非标准的方法，如果浏览器可以保存永久的cookie时，返回true，其它返回false；

检测插件：

检测浏览器中是否安装了特定的插件是一种最常见的检测例程；

对于非低版本的IE可以使用plugins数组来达到目标；该数组中的每一项包含以下属性：

• name：插件的名字；
• description：插件的描述；
• filename：插件的文件名；
• length：插件所要处理的MIME类型数量；

一般来说，name属性中会包含检测插件必需的所有信息，但有时也完全如此；在检测插件时，需要迭代plugins数组中的每个插件，如：

// 检测非低版本的IE插件
function hasPlugin(name){
    name = name.toLowerCase();
    for(var i=0,len=navigator.plugins.length; i<len; i++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1)
            return true;
    }
    return false;
}
// 检测Flash
alert(hasPlugin("Flash"));
// 检测QuickTime
alert(hasPlugin("QuickTime"));
// 检测Java
alert(hasPlugin("Java"));

每个插件本身也是一个MimeType对象的数组，这些对象可以通过方括号语法来访问，共有四个属性：MIME类型描述description、回指插件对象enabledPlugin、表示与MIME类型对应的文件扩展名的字符串suffixes、表示完整MIME类型字符串type；

检测IE中的插件比较麻烦，因为IE不支持Netscape式的插件；在IE中检测插件的唯一方式就是使用专有的ActiveXObject类型，并尝试创建一个特定插件的实例；IE是以COM对象的方式实现插件的，而COM对象使用唯一标识符来标识；因此，要想检查特定的插件，就必须知道其COM标识符，如：Flash的标识符是：ShockwaveFlash.ShockwaveFlash；

// 检测IE中的插件
function hasIEPlugin(name){
    try{
        new ActiveXObject(name);
        return true;
    }catch(e){
        return false;
    }
}
// 检测Flash
alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
// 检测QuickTime
alert(hasIEPlugin("QuickTime.QuickTime"));

使用了try、catch，因为创建未知的COM对象会导致抛出错误；

两种检测方法差别太大，典型的作法是针对每个插件分别创建测试函数；如：

// 检测所有浏览器中的Flash
function hasFlash(){
    var result = hasPlugin("Flash");
    if(!result)
        result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
    return result;
}
// 检测所有浏览器中的QuickTime
function hasQuickTime(){
    var result = hasPlugin("QuickTime");
    if(!result)
        result = hasIEPlugin("QuickTime.QuickTime");
    return result
}
alert(hasFlash());  // 检测Flash
alert(hasQuickTime());  // 检测QuickTime;

plugins集合中有个refresh() 方法，用于刷新plugins以反映最新安装的插件，这个方法接收一个参数：表示是否应该重新加载页面的一个布尔值；如果为true，重新加载包含插件的所有页面，否则，只更新plugins集合，不重新加载页面；

注册处理程序：

registerProtocolHandler()方法接收三个参数：要处理的协议(mailto或ftp)、处理该协议的页面的URL和应用程序名称；如：将一个应用程序注册为默认的邮件客户端：

navigator.registerProtocolHandler("mailto","http://127.0.0.1:5500/?cmd=%s",
                            "Some Mail Client");   // %s表示原始的请示

IE不支持，并且在生产环境中，几乎没有什么用途；

screen对象：

screen对象提供了获取显示器信息的功能，显示器信息的主要用途是确定网页在客户机是所能达到的最大显示空间；此对象的用处不大，其只是用来获取客户端的能力，其中包括显示器的信息，如宽和高或颜色数量的信息；每个浏览器中的screen对象都包含着各不相同的属性；

属性:

• availHeight 和 availWidth：只读，屏幕减去系统部件（比如任务栏）的高度和屏幕减去系统部件的宽度；即实际可用的大小；
• colorDepth：只读，返回颜色位数，如24，多数为32位
• pixelDepth：只读，屏幕的位深(FF)
• width 和 height：屏幕的宽度和屏幕的高度
• left 和 top：当前屏幕距左边的距离和距顶边的距离(FF支持)
• availLeft 和 availTop：只读，未被系统占用的最左侧的和最上方的像素值 (FF)
• bufferDepth：读、写用于呈现屏外位图的位数（IE）
• deviceXDPI与deviceYDPI：只读，实际的水平与垂直DPI(IE)
• logicalXDPI与logicalYDPI：只读，屏幕逻辑的水平与垂直DPI (IE)
• fontSmoothingEnabled：只读，是否启用字体平滑(IE)
• updateInterval：读、写，以毫秒表示的屏幕刷新时间间隔(IE)

这些信息经常出现在测定客户端能力的站点跟踪工具中，但通常不会用于影响功能；不过，有时候也可能会用到其中的信息来调整浏览器窗口的大小，使其占据屏幕的可用空间，如：

// 网页全屏，非IE会禁用调整窗口的能力，因此是无效的
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);
 
// 弹出窗口居中
function center(url){
    var w = screen.availWidth / 2;
    var h = screen.availHeight / 2;
    // 计算居中显示时左侧坐标
    var l = (screen.availWidth - w) / 2;
    // 计算居中显示时顶部坐标
    var t = (screen.availHeight - h) / 2;
    // 计算坐标参数字符串
    var p = "top=" + t + ",left=" + l + ",width=" + w + ",height=" + h;
    var win = window.open(url, "newin", p);
    win.focus();
}
center("https://www.zeronetwork.cn");

涉及移动设备的屏幕大小时，情况有所不同；运行iOS的设备始终会返回设备竖着方向的尺寸768X1024，而Android会相应调用screen.width和screen.height的值；

// 网页开屏
var x=0, y = window.screen.availHeight, dx=5;
var newWin, intervalID;
function showPage(){
    if(x < screen.availWidth) 
        x += dx;
    else 
        clearInterval(intervalID);
    newWin.resizeTo(x, y);
}
function showWin(){
    newWin = window.open("","newWin","menubar=no,toolbar=no");
    newWin.moveTo(0,0);
    newWin.resizeTo(x,y);
    intervalID = window.setInterval(showPage, 100);
}
showWin();
 
// 网页布局
function loadCSS(){
    var iWidth = screen.availWidth;
    var sCSSUrl;
    switch(iWidth){
        case 1024:
            sCSSUrl = "style1.css";
            break;
        case 1280:
            sCSSUrl = "style2.css";
            break;
        default:
            sCSSUrl = "default.css";
            break;
    }
    var oCSS = document.createElement("link");
    oCSS.setAttribute("rel","stylesheet");
    oCSS.setAttribute("type","text/css");
    oCSS.setAttribute("href",sCSSUrl);
    document.getElementsByTagName("head")[0].appendChild(oCSS);
}
window.onload = loadCSS;

错误处理：

window对象的onerror属性是一个事件处理程序，当未捕获的异常传递到调用栈上时就会调用它，并把错误的消息输出到浏览器的Javascript控制台上；

window.onerror的第一个参数是描述错误的一条消息，第二个参数是一个字符串，它存放引发错误的Javascript代码所在的文档的URL，第三个参数是文档中发生错误的行数；

onerror处理程序也有一个返回值，如果返回false，它通知浏览器事件处理程序已经处理了错误，不需要其他操作（换句话说，浏览器不应该显示它自己的错误消息；

onerror处理程序是早期的JavaScript的产物，那时语言核心不包括try/catch异常处理语句；现在实际开发中，虽然很少使用它，但有些项目还在使用它，如：

// 在一个对话中弹出错误消息，但不超过三次
window.onerror = function(msg,url,line){
    if(onerror.num++ < onerror.max){
        alert("ERROR: " + msg + "\nurl: " + url + "\nline: " + line);
        return true;
    }
}
onerror.max = 3;
onerror.num = 0;
 
function show(a,b){
    return sum(a,b);
}
console.log(show(3,0));