零js基礎 | 程序設計 | 9 - 客户端检测

直接把函数作为属性访问会导致JavaScript 错误。使用typeof 操作符会更靠谱一点,但IE
对typeof xhr.open 会返回"unknown",在浏览器环境下测试任何对象的某个特性是否
存在,要使用下面这个函数。

function isHostMethod(object, property) {
    var t = typeof object[property];
    return t == 'function' ||
        (!!(t == 'object' && object[property])) ||
        t == 'unknown';
}

result = isHostMethod(xhr, "open"); //true
result = isHostMethod(xhr, "foo"); //false

能力检测,不是浏览器检测
检测某个或某几个特性并不能够确定浏览器。下面给出的这段代码(或与之差不多的代码)可以在
许多网站中看到,这种“浏览器检测”代码就是错误地依赖能力检测的典型示例。

//错误!还不够具体
var isFirefox = !!(navigator.vendor && navigator.vendorSub);
//错误!假设过头了
var isIE = !!(document.all && document.uniqueID);

一次性检测

//确定浏览器是否支持Netscape 风格的插件
var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);
//确定浏览器是否具有DOM1 级规定的能力
var hasDOM1 = !!(document.getElementById && document.

在实际开发中,应该将能力检测作为确定下一步解决方案的依据,而不是用它来 判断用户使用的是什么浏览器。

完整用户代理字条串检测脚本代码

       var client = function() {
            //呈现引擎
            var engine = {
                ie: 0,
                gecko: 0,
                webkit: 0,
                khtml: 0,
                opera: 0,
                //完整的版本号
                ver: null
            };
            //浏览器
            var browser = {
                //主要浏览器
                ie: 0,
                firefox: 0,
                safari: 0,
                konq: 0,
                opera: 0,
                chrome: 0,
                //具体的版本号
                ver: null
            };
            //平台、设备和操作系统
            var system = {
                win: false,
                mac: false,
                x11: false,
                //移动设备
                iphone: false,
                ipod: false,
                ipad: false,
                ios: false,
                android: false,
                nokiaN: false,
                winMobile: false,
                //游戏系统
                wii: false,
                ps: false
            };
            //检测呈现引擎和浏览器
            var ua = navigator.userAgent;
            if (window.opera) {
                engine.ver = browser.ver = window.opera.version();
                engine.opera = browser.opera = parseFloat(engine.ver);
            } else if (/AppleWebKit\/(\S+)/.test(ua)) {
                engine.ver = RegExp["$1"];
                engine.webkit = parseFloat(engine.ver);
                //确定是Chrome 还是Safari
                if (/Chrome\/(\S+)/.test(ua)) {
                    browser.ver = RegExp["$1"];
                    browser.chrome = parseFloat(browser.ver);
                } else if (/Version\/(\S+)/.test(ua)) {
                    browser.ver = RegExp["$1"];
                    browser.safari = parseFloat(browser.ver);
                } else {
                    //近似地确定版本号
                    var safariVersion = 1;
                    if (engine.webkit < 100) {
                        safariVersion = 1;
                    } else if (engine.webkit < 312) {
                        safariVersion = 1.2;
                    } else if (engine.webkit < 412) {
                        safariVersion = 1.3;
                    } else {
                        safariVersion = 2;
                    }
                    browser.safari = browser.ver = safariVersion;
                }
            } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
                engine.ver = browser.ver = RegExp["$1"];
                engine.khtml = browser.konq = parseFloat(engine.ver);
            } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
                engine.ver = RegExp["$1"];
                engine.gecko = parseFloat(engine.ver);
                //确定是不是Firefox
                if (/Firefox\/(\S+)/.test(ua)) {
                    browser.ver = RegExp["$1"];
                    browser.firefox = parseFloat(browser.ver);
                }
            } else if (/MSIE ([^;]+)/.test(ua)) {
                engine.ver = browser.ver = RegExp["$1"];
                engine.ie = browser.ie = parseFloat(engine.ver);
            }
            //检测浏览器
            browser.ie = engine.ie;
            browser.opera = engine.opera;
            //检测平台
            var p = navigator.platform;
            system.win = p.indexOf("Win") == 0;
            system.mac = p.indexOf("Mac") == 0;
            system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
            //检测Windows 操作系统
            if (system.win) {
                if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
                    if (RegExp["$1"] == "NT") {
                        switch (RegExp["$2"]) {
                            case "5.0":
                                system.win = "2000";
                                break;
                            case "5.1":
                                system.win = "XP";
                                break;
                            case "6.0":
                                system.win = "Vista";
                                break;
                            case "6.1":
                                system.win = "7";
                                break;
                            default:
                                system.win = "NT";
                                break;
                        }
                    } else if (RegExp["$1"] == "9x") {
                        system.win = "ME";
                    } else {
                        system.win = RegExp["$1"];
                    }
                }
            }
            system.iphone = ua.indexOf("iPhone") > -1;
            system.ipod = ua.indexOf("iPod") > -1;
            system.ipad = ua.indexOf("iPad") > -1;
            system.nokiaN = ua.indexOf("NokiaN") > -1;
            //windows mobile
            if (system.win == "CE") {
                system.winMobile = system.win;
            } else if (system.win == "Ph") {
                if (/Windows Phone OS (\d+.\d+)/.test(ua)) {;
                    system.win = "Phone";
                    system.winMobile = parseFloat(RegExp["$1"]);
                }
            }
            //检测iOS 版本
            if (system.mac && ua.indexOf("Mobile") > -1) {
                if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)) {
                    system.ios = parseFloat(RegExp.$1.replace("_", "."));
                } else {
                    system.ios = 2; //不能真正检测出来,所以只能猜测
                }
            }
            //检测Android 版本
            if (/Android (\d+\.\d+)/.test(ua)) {
                system.android = parseFloat(RegExp.$1);
            }
            //游戏系统
            system.wii = ua.indexOf("Wii") > -1;
            system.ps = /playstation/i.test(ua);
            //返回这些对象
            return {
                engine: engine,
                browser: browser,
                system: system
            };
        }()
        console.log(client.engine)
        console.log(client.browser)
        console.log(client.system)

零js基礎 | 程序設計 | 8 - BOM

BOM核心
控制窗口、框架和弹出窗口
利用location 对象中的页面信息
使用navigator对象了解浏览器;

全局变量不能通过delete 操作符删除,而直接在window 对象上的定义的属性可以

var age = 29;
window.color = "red";
//在IE < 9 时抛出错误,在其他所有浏览器中都返回false
delete window.age;
//在IE < 9 时抛出错误,在其他所有浏览器中都返回true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined
//这里会抛出错误,因为oldValue 未定义
var newValue = oldValue;
//这里不会抛出错误,因为这是一次属性查询
//newValue 的值是undefined
var newValue = window.oldValue;

window.frames[0]或者window.frames["topFrame"]来引用上方的框架。不过,恐怕你最好使用
top 而非window 来引用这些框架(例如,通过top.frames[0])


与top 相对的另一个window 对象是parent。顾名思义,parent(父)对象始终指向当前框架的
直接上层框架。在某些情况下,parent 有可能等于top;但在没有框架的情况下,parent 一定等于
top(此时它们都等于window)。

ff支持 screenX 和screenY

    var leftPos = (typeof window.screenLeft == 'number') ?
        window.screenLeft : window.screenX;
    var topPos = (typeof window.screenTop == 'number') ?
        window.screenTop : window.screenY;
//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗向下移动100 像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动50 像素
window.moveBy(-50,0);

所有浏览器都有:innerWidth/innerHeight/outerWidth/outerHeight

IE9+/Safari/Firefox: outerWidth/outerHeight返回浏览器本身尺寸

Opera:outerWidth/outerHeight:表示单个标签页对应的浏览器窗口大小;而innerWidth/innerHeight表示该容器中页面视图的大小 - 边框宽度;

chrome:outerWidth/outerHeight与 innerWidth/innerHeight返回相同的值,即viewport大小而非浏览器窗口大小

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
    if (document.compatMode == "CSS1Compat") {
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

compatMode 检查是否处于标准模式;
使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接收两个
参数,其中resizeTo()接收浏览器窗口的新宽度和新高度,而resizeBy()接收新窗口与原窗口的宽
度和高度之差。来看下面的例子。
//调整到100×100
window.resizeTo(100, 100);
//调整到200×150
window.resizeBy(100, 50);
//调整到 300×300
window.resizeTo(300, 300);

window.open(要加载的URL,窗口目标,一个特性字条串,是否当前页面打开)
,所以


< a href="http://www.wrox.com" target="topFrame"></a> 
====
window.open("http://www.wrox.com/", "topFrame");

window.close()只适应于window.open()打开的窗口;弹出窗口打调用top.close();

创建的window 对象有一个opener 属性,其中保存着打开它的原始窗口对象


        var wroxWin = window.open('http://www.w.com','w','height=400,width=400,top:10,left=10,resizable = yes')
        console.log(wroxWin.opener = window) //true

chrome中设置opener属性为null,表示在单独进程中独立运行;

var wroxWin = window.open("http://www.wrox.com/","wroxWindow",
"height=400,width=400,top=10,left=10,resizable=yes");
wroxWin.opener = null;

检测是否被屏蔽弹出

        var blocked = false;
        try {
            var wroxWin = window.open("http://www.wrox.com", "_blank");
            if (wroxWin == null) {
                blocked = true;
            }
        } catch (ex) {
            blocked = true;
        }
        if (blocked) {
            alert("The popup was blocked!");
        }
        }

返回布尔值;

if (confirm("Are you sure?")) {
    alert("I'm so glad you're sure! ");
} else {
    alert("I'm sorry to hear you're not sure. ");
}

返回false或字符串

var result = prompt("What is your name? ", "");
if (result !== null) {
    alert("Welcome, " + result);
}

localtion对象

既是window对象,也是document对象;

window.location == document.location 引用同一个对象 ;

查询字符串参数

        function getQueryStringArgs() {
            //取得查询字符串并去掉开头的问号
            var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
                //保存数据的对象
                args = {},
                //取得每一项
                items = qs.length ? qs.split("&") : [],
                item = null,
                name = null,
                value = null,
                //在for 循环中使用
                i = 0,
                len = items.length;
            //逐个将每一项添加到args 对象中
            for (i = 0; i < len; i++) {
                item = items[i].split("=");
                name = decodeURIComponent(item[0]);
                value = decodeURIComponent(item[1]);
                if (name.length) {
                    args[name] = value;
                }
            }
            return args;
        }

//假设查询字符串是?q=javascript&num=10
var args = getQueryStringArgs();
alert(args["q"]); //"javascript"
alert(args["num"]); //"10"

跳转新窗口:

          location.assign('http://www.baidu.com')
          window.location = 'http://www.baidu.com'
          location.href = 'http://www.baidu.com'
        //假设初始URL 为http://www.wrox.com/WileyCDA/
        //将URL 修改为"http://www.wrox.com/WileyCDA/#section1"
        location.hash = "#section1";
        //将URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
        location.search = "?q=javascript";
        //将URL 修改为"http://www.yahoo.com/WileyCDA/"
        location.hostname = "www.yahoo.com";
        //将URL 修改为"http://www.yahoo.com/mydir/"
        location.pathname = "mydir";
        //将URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
        location.port = 8080;

禁止返回后退页面

window.location.replace('http://baidu.com')

重新加载 reload()

location.reload(); //重新加载(有可能从缓存中加载)
location.reload(true); //重新加载(从服务器重新加载)

navigator

页面在IE7提示升级

if(window.ActiveXObject)
    {
        var browser=navigator.appName 
        var b_version=navigator.appVersion 
        var version=b_version.split(";"); 
        var trim_Version=version[1].replace(/[ ]/g,""); 
      if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0"  || trim_Version=="MSIE7.0" ) 
        { 
        $(".ie7andie6").show();
        $(".contentnone").hide();
        } 
   }

跳到手机网站

 var a=navigator.userAgent;
if(a.indexOf("Android")!=-1 || a.indexOf("iPhone")!=-1 || a.indexOf("iPad")!=-1 ){

             //跳转到手机网站

    }

检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对于非IE 浏览器,可以使用
plugins 数组来达到这个目的。该数组中的每一项都包含下列属性。
 name:插件的名字。
 description:插件的描述。
 filename:插件的文件名。
 length:插件所处理的MIME 类型数量。

    function hasPlugin(name) {
        name = name.toLowerCase();
        for (var i = 0; i < navigator.plugins.length; i++) {
            if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
                return true;
            }
        }
        return false;
    }
    //检测Flash
    alert(hasPlugin("Flash"));
    //检测QuickTime
    alert(hasPlugin("QuickTime"));
}

这个hasPlugin()函数接受一个参数:要检测的插件名

IE插件专家

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

推荐是下面的方法:

        //检测所有浏览器中的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;
        }
        //检测Flash
        alert(hasFlash());
        //检测QuickTime
        alert(hasQuickTime());

screen 对象

JavaScript 中有几个对象在编程中用处不大,而screen 对象就是其中之一。screen 对象基本上只
用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器
中的screen 对象都包含着各不相同的属性,下表列出了所有属性及支持相应属性的浏览器。

history 对象

//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);

//跳转到最近的wrox.com 页面
history.go("wrox.com");
//跳转到最近的nczonline.net 页面

history.back();
//前进一页
history.forward();

history 对象还有一个length 属性

if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}

虽然history 并不常用,但在创建自定义的“后退”和“前进”按钮,以及检测当前页面是不是
用户历史记录中的第一个页面时,还是必须使用它。