首页 > 代码库 > JavaScript 浏览器程序设计
JavaScript 浏览器程序设计
不仅JavaScript是基于对象的，而且浏览器也是由对象组成的。JavaScript在浏览器中运行时，可以访问浏览器的对象，其方式与使用JavaScript的内置对象一样。浏览器提供了许多对象，例如window对象对应浏览器的窗口，document对象对应浏览器的页面等。还有许多其他对象可表示页面上写入的HTML，例如每个元素都对应一个img对象，用于在文档中插入一幅图像。
浏览器为JavaScript提供的对象集合通常称为浏览器对象模型（Browser Object Model,BOM）。JavaScript的这些附加功能都存在一个潜在的弊端：BOM没有标准的实现方式。可以使用哪个对象集合高度依赖于当前使用的浏览器的类型和版本。如果仅使用BOM的核心功能（所有浏览器都有的对象），那么代码能更好地在不同的浏览器和版本中正常运行。
浏览器对象简介
JavaScript在页面中运行时，可以访问大量由Web浏览器提供的其他对象。与Math对象类似，会自动创建这些对象，不需要显示地创建它们。对象及其方法，属性和事件都已在BOM中映射好。
BOM中常用的对象。在某种程度上来说，BOM的这些部分是所有浏览器通用的。
BOM有一个层次结构。在层级的顶端是window对象，它表示浏览器的框架以及与其相关的所有内容，如滚动条和导航栏图标等。页面包含在窗口框架中。在BOM中，页面用document对象表示。
windos对象
windos对象代表浏览器的框架或窗口，其中包含了页面。在某种程度上，该对象也表示浏览器本身，它包含大量属性。例如，通过windos对象的属性，可以确定正在运行什么浏览器，用户访问过的页面，浏览器窗口的大小和用户屏幕的大小等。还可以使用window对象来访问或修改浏览器状态栏中的文本，修改加载的页面甚至打开新窗口。
window对象是一个全局对象，因此不需要使用其名称来访问属性和方法。实际上，全局函数和全局变量（可以在页面的任何位置访问）都创建为该全局对象的属性。
window对象的某些属性也是对象。所有浏览器通用的对象包括document,navigator,history,screen和location。document对象表示页面；history对象包含用户访问页面的历史信息；navigator对象包含浏览器的信息；screen对象汉堡客户端显示能力的信息；location对象包含当前页面的位置信息。
注意：在Web页面中所使用的函数名或变量名不能与BOM对象及其属性和方法的名称相冲突。因为在全局作用域中定义的任何函数或变量实际都会添加到window对象中。
例如
var myVariable="hello world!";
alert(window.myVariable);警告框中将会显示消息”hello world”。
history对象
history对象跟踪用户访问的每个页面。这个页面列表常称为浏览器的历史栈（history stack）。它允许用户单击浏览器的Back或Forward按钮，来重新访问页面。通过window对象的history属性可以访问history对象。
history对象有length属性。使用它可以获得历史栈中的页面数量。history对象有back()和forward()方法。调用它们时，浏览器当前加载的页面位置就变成用户访问过的前一个页面或后一个页面。history对象的go()方法，带一个参数，该参数指定在历史栈中前进或后退几个页面。
注意:go(-1)等价于back(),go(1)等价于forward()。
location对象
location对象包含大量有关当前页面位置的有用信息。它不仅包含了页面的统一资源定位器（Uniform Resource Locator,URL），还包含保存该页面的服务器，连接服务器的端口号以及所使用的协议。通过location对象的href,hostname,port和protocol属性，就可以获得这些信息。但这些信息与页面的访问位置相关：是从服务器上加载页面，还是直接从本地硬盘上加载页面。
除了获得当前页面的位置之外，还可以使用location对象的方法来改变当前页面的位置，或刷新当前页面。可以采用两种方式导航到另一个页面。一是将location对象的href属性设置为指向另一个页面，二是使用location对象的replace()方法。这两种方式的效果相同，页面都改变了位置。但是它们的区别在于：replace()方法将从历史栈中移除当前页面，代之以新页面；而使用href属性仅把新页面加在历史栈的顶部。
例如，要用新页面myPage.html替换当前页面，使用replace()方法的代码如下:
location.replace("myPage.html");如果要加载新页面，并把它添加到历史栈的顶部，则可以使用href属性：
location.href="myPage.html";navigator对象
navigator对象是window对象的一个属性，可用于所有浏览器。这个对象更恰当的名称是”浏览器对象”，因为navigator对象包含浏览器和运行浏览器的操作系统的大量信息。
navigator对象最常见的用途是处理浏览器之间的差异。使用其属性，可以确定用户的浏览器，浏览器的版本和操作系统。接着可以操作这些信息，确保代码仅在支持它的浏览器中运行。这种技术成为“浏览器嗅探“，该技术存在一些限制。一种替代浏览器嗅探的技术是”特性检测”，这种技术可以检测浏览器是否支持某个特定的特性。
navigator对象的appName属性和userAgent属性在标识浏览器方面很有用。appName属性将返回浏览器的模型，如对IE返回Microsoft Internet Explorer,对Firefox,Chrome和Safari返回Netscape。userAgent属性返回一个包含多段信息的字符串，如浏览器的版本，操作系统和浏览器模型。这个属性的返回因浏览器而异，例如在chrome获取userAgent字符串：
<body>
<script>
function getBrowserMsg() {
var ua=navigator.userAgent;
document.writeln(ua);
}
getBrowserMsg();
</script>页面输出为：
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.87 Safari/537.36
HTML5规范中为navigator对象新增了geolocation属性。主要作用是让开发人员获得并利用设备和计算机的位置。用户必须给予开发人员权限，才能获取并使用这些信息。例如：
geolocation对象的核心部分就是它的getCurrentPosition方法。调用该方法时，必须向它传递一个回调函数，在getCurrentPosition方法的工作成功完成后就会执行这个回调函数。
function getSuccess(position) {
var coords=position.coords;
var latitude=coords.latitude;
var longitude=coords.longitude;
var message="You‘re at "+latitude+" , "+longitude;
document.write(message+"<br>");
}例如getSuccess函数就是回调函数，当navigator.geolocation.getCurrentPosition确定计算机或设备的位置时，就会执行这个回调函数。getSuccess函数的参数position是一个对象，其中包含Earthly位置和计算机或设备的海拔高度，可以通过position对象的coords属性获得这些信息。latitude表示计算机的维度,longitude表示计算机的经度，altitude代表海拔高度，speed属性用于获取设备/计算机的速度。
function getError(errorObj) {
document.write(errorObj.message+"<br>");
}
navigator.geolocation.getCurrentPosition(getSuccess,getError);getCurrentPosition()方法的第二个参数是另外一个回调函数，当发生错误时就会执行这个回调函数。错误回调函数仅带有一个参数，表示getCurrentPosition方法运行失败的原因。它是一个包含两个属性的对象。第一个属性code是一个表示失败原因的数值。
| 值 | 说明 |
|---|---|
| 1 | 页面无权限获取设备/计算机的位置 |
| 2 | 发生了内部错误 |
| 3 | 在获取设备/计算机的位置前，所允许的时间已到 |
第二个属性为message,表示描述错误的人类可读的信息。
screen对象
window对象的screen对象属性包含了大量有关客户机显示能力的信息。其属性包括height和width，分别表示屏幕的垂直和水平尺寸，单位为像素。screen对象还有colorDepth属性，表示客户机屏幕使用的色彩位数。要确定屏幕上有多少种颜色，只需要计算2的colorDepth次方。例如，colorDepth为1，表示只有两种颜色；而colorDepth为8，表示有256中颜色。目前大部分屏幕的色彩深度都至少是8，通常是24或者32。
document对象
与window对象一样，document对象可能是BOM中最重要和最常用的对象之一。通过这个对象，可以访问到页面上的HTML元素及其属性和方法。
document对象有很多关联的属性，它们也是类似于数组的结构，称为集合。主要的集合有forms,images和links。IE还支持其他很多集合属性，如all集合属性，它是页面上用对象表示的所有元素的数组。
可以使用一下标记在HTML页面中插入一幅图像：
<img alt="USA" name="myImage" src="usa.gif">浏览器通过创建一个img对象myImage，使这个图像可以通过JavaScript来操作。实际上，页面上的每幅图像都有一个对应的img对象。页面上的每个img对象都保存早images集合中，该集合是document对象的一个属性。这个集合以及其他集合的用法与数组的用法相同。页面上的第一幅图片在document.images[0]元素中，第二幅图像在document.images[1]中，以此类推。
img对象有许多非常有用的属性。其中最重要的是src属性，改变它就可以改变所加载的图像。
对于每个有href属性的超链接元素< a/>,浏览器都会创建一个a对象。a对象最重要的属性是href,它对应该标记的href属性。使用该属性，可以确定该链接指向何处，在页面加载完成后，还可以修改它。页面上所有a对象的集合都包含在links的集合中。
JavaScript 浏览器程序设计