JS 学习笔记(BOM篇)

Before starting

之前提到过,一个完整的 JavaScript 实现由三部分组成:ECMAScript、DOM 和 BOM。今天我们来看看 BOM.

BOM 提供了很多对象来访问浏览器功能,这些功能与网页内容无关,下面我们依次来看看这些对象吧:windowlocationnavigatorscreenhistory


window 对象

window 对象表示浏览器的一个实例,在浏览器中,他既是通过 JavaScript 访问浏览器的接口,又是 ECMAScript 规定的 Global 对象

框架

  • 若页面包含框架,则每个框架都拥有自己的 window 对象,并且保存在 frames 集合中
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <html>
    <head>
    <title>Frameset Example</title>
    </head>
    <frameset rows="160,*">
    <frame src="frame1.htm" name="topFrame">
    <frameset cols="50%,50%">
    <frame src="frame2.htm" name="leftFrame">
    <frame src="frame3.htm" name="rightFrame">
    </frameset>
    </frameset>
    </html>

可以使用 window.frames[0]window.frames["topFrame"] or frames[0] 来引用最上层框架

  • top 对象指向最外层的框架,也就是浏览器窗口

  • self 对象指向 window

窗口相关

  • screenLeftscreenRight 属性,分别表示窗口相对于屏幕左边和上边的位置

  • 通过 innerWidthouterWidth 属性获得视口大小。而 IE8 及更早版本没有提供上述属性,但可通过 DOM 来获得。

  • window.open(URL,name,features,replace) 方法,方法用法详情

  • close() 方法,一般用于通过 window.open() 打开的窗口

    1
    2
    var win = window.open("http://zerosrat.com");
    win.close();

间歇调用和超时调用

  • JavaScript 是单线程语言,但允许通过设置超时值和间歇值来调度代码在特定时间执行

  • 间歇调用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var num = 0;
    var max = 10;
    var intervalId = null;

    function incrementNum() {
    num++;
    if(num == max) {
    clearInterval(intervalId);
    alert("done");
    }
    }

    intervalId = setInterval(incrementNum, 1000);
  • 超时调用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var num = 0;
    var max = 10;

    function incrementNum() {
    num++;
    if(num < max) {
    setTimeout(incrementNum, 1000);
    } else {
    alert("done");
    }
    }

    setTimeout(incrementNum, 1000);
  • 上面两段代码实现了相同的功能。推荐使用 setTimeout() ,因为在开发中,很少使用前者(间歇调用),因为后一个间歇调用可能在前一个调用结束之前启动

系统对话框

  • alert()

  • confirm()

    1
    2
    3
    4
    5
    if(confirm(Are you sure?)) {
    alert("I'm glad u r sure");
    } else {
    alert("I'm sad u r not sure");
    }
  • prompt()

    1
    2
    3
    4
    var result = prompt("What is your id", "default");
    if(result ! == null){
    alert("Welcome," + result);
    }

location 对象

  • location 对象的属性和方法

  • 改变浏览器页面 url
    window.location.assign(url);
    window.location = url;
    window.location.href = url;
    以上三句代码效果相同,最常用的是最后一句 window.location.href = url;

  • 上述方式修改 url 后会在历史记录中生成新记录,可使用 window.location.replace(url); 来禁用这种行为



screen 对象


history 对象

  • history.go()

    1
    2
    3
    history.go(-1); //后退一页
    history.go(2); //前进两页
    history.go("zerosrat.com"); //跳转至最近的zerosrat.com页面
  • history.back();history.forward() 分别指后退一页和前进一页


应用

能力检测

  • 最常用最为广泛接受的客户端检测形式

  • 两个重要概念:先检测达成目的的最常用的特性;必须测试实际要用到的特性

  • 测试对象某特性是否存在的例子

    1
    2
    3
    4
    5
    function isHostMethod(object, property) {
    var t = typeof object[property];
    return t == 'function' || (!!(t == 'object' && object[property])) || t == 'unknown';
    }
    var result = isHostMethod(document, "getElementById");
  • 能力检测不是浏览器检测,因为检测某几个特性并不能确定浏览器

怪癖(bug)检测

  • 怪癖检测是想要知道浏览器存在什么缺陷也就是“bug”

  • Safari3 以前版本会枚举被隐藏的属性,可以用下面的函数来检测该“怪癖”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var hasEnumShadowsQuirk = function () {
    var o = { toString : function(){} };
    var count = 0;
    for(var prop in o){
    if (prop == "toString"){
    count ++;
    }
    }
    return (count > 1);
    }();

如果浏览器存在这个bug,那么使用for-in循环枚举带有自定义的toString() 方法的对象,就会返回两个toString的实例。

用户代理检测

  • 每次 HTTP 请求过程中,User-Agent 字符串作为 Request Headers 中一部分发送,而字符串可通过 JavaScript 的 navigator.userAgent 来访问。从而通过它来识别用户的浏览器类型