前端开发

BOM-浏览器对象模型

BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。W3C为了把浏览器中JavaScript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范中。

window对象

BOM的核心对象时window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

  1. 所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。后面的很多全局JavaScript对象（location和navigator）实际上都是window对象的属性。
  2. 如果页面中包含框架（frame），则每个框架都拥有自己的window对象。在使用框架的情况下，浏览器中会存在多个Global对象，每个框架中定义的全局变量会自动成为框架中window对象的属性。
  3. IE、Safari、Oprea、Chrome使用screenLeft和screenTop属性表示窗口相对屏幕左边和上边的位置；Firefox则使用screenX和screenY属性，Safari和chrome也支持这个属性。使用moveTo()和moveBy()也可以将窗口精确地移动到一个新位置。这些属性和方法与使用的浏览器有很大的关系。
  4. 使用window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。这个方法接收4个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
  5. JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值（一般不使用）来调度代码在特定的时刻执行。setTimeout(function(){},1000)，延迟一秒
  6. 系统对话框：浏览器通过alert()、confirm()、prompt()来调用警告、确认、提示框。
    1
    2
    3
    4
    5
    6
    alert("hello world!"); //一个OK
    confirm("are you sure?"); //一个OK，一个Cancel
    prompt("what is your name?","Michael"); //OK Cancle 和一个默认为Michael的输入框

    window.print(); //显示“打印”对话框
    window.find(); //显示“查找”对话框

location对象

location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一个写导航功能。它既是window对象的属性，也是document对象的属性。

属性名 例子 说明
hash “#contents” 返回URL中的hash
host “www.wrox.com:80” 返回服务器名和端口号
hostname “www.wrox.com” 不带端口号的服务器名
href “http://www.wrox.com“ 加载页面的完整的URL
pathname “/WileCDA/“ URL中的目录和文件名
port “8080” URL中指定的端口号
protocol “http:” 页面使用的协议
search “?q=javascript” URL的查询字符串
  • 查询字符串参数：根据location的serch方法获取查询字符串，根据&来分割字符串，再将相应的参数和值放入args数组中，就可以方便对每个参数进行访问了。
  • 通过location.assign(“http://www.wrox.com“) 可以立即打开新URL。此外通过window.location和location.href（常用）也可以达到上面的效果。还可以通过修改location的hash、search等属性进而修改location。

navigator对象现在已经成为识别客户端浏览器的事实标准。navigator对象时所有支持JavaScript的浏览器所共有的，但是每个浏览器的navigator对象也都有一套自己的属性。
对于非IE浏览器，可以使用navigator对象的plugins数组来检车插件。navigator.plugins[n]即保存了插件。if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1)即便是存在名称为name的插件。

客户端检测

面对普遍存在的浏览器的不一致性问题，开发人员要么采取迁就各方的“最小公分母”策略，要么（也是最常见的）利用各种客户端检测方法，来突破或者规避种种局限性。检测Web客户端的手段很多，而且各有利弊。但不到万不得已，不要使用客户端检测，应该优先使用更通用的方法。一言以蔽之，先设计最通用的方案，然后再使用特定于浏览器的技术增强方案。

能力检测

最常用也最为人们广泛接受的客户端检测形式是能力检测。其目标不是识别特定的浏览器，而是识别浏览器的功能。能力检测不是浏览器检测，所以不能根据能力检测判断浏览器为何种浏览器。在可能的情况下，尽量采用typeof进行能力检测。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//简单的能力检测
function getElement(id){
	if(document.getElementById){
		return document.getElementById(id);
	}else if(document.all){
		return document.all[id];
	}else{
		throw new Error("no way to retrieve element");
	}
}

//使用typeof检测。要检测具体的要使用的属性方法是否存在
function isSortable(object){
	return typeof object.sort == "function";
}

怪癖检测

与能力检测类似，怪癖检测的目标是识别浏览器的特殊行为。通常需要运行一小段代码，一确定某一特性不能正常工作。一般来说，“怪癖”是个别浏览器所独有的，而且通常被归为bug。

用户代理检测

用户代理检测通过检测用户代理字符串来确定实际使用的浏览器，包括浏览器、平台、操作系统以及浏览器版本。在每一次HTTP请求过程中，用户代理字符串是作为响应首部发送的，而且该字符串可以通过JavaScript的navigator.userAgent属性访问。在服务器端，通过检测用户代理字符串来确定用户使用的浏览器是一种常见而且广为接受的做法。而在客户端，用户代理检测一般被当做一种万不得才用的做法，其优先级排在能力检测和怪癖检测之后。