JavaScript之BOM（浏览器对象模型）
2012-08-12 17:04
471 查看
BOM（浏览器对象模型），它提供了独立于内容而与浏览器窗口进行交互的对象。BOM由一系列相关的对象构成。
一、window对象
window对象表示整个浏览器窗口，但不必表示其中包含的内容。Window还可用于移动或调整它表示的浏览器的大小。
(1)、window对象在框架中的应用
如果页面使用框架集合，每个框架都由它自己的window对象表示，存放在frames集合中。在frames集合中，可用数字（由0开始，从左到右，逐行的）或名字对框架进行索引。可以用top对象代替window对象（例如：top.frames[0]）。top对象指向的都是最顶层的框架，即浏览器窗口自身。
由于window对象是整个BOM的中心，所以它享有一种特权，即不需要明确引用它，在引用函数、对象或集合时，解释程序都会查看window对象，所以window.frame[0]可以只写frame[0]。
window另一个实例是parent。parent对象与装载文件框架一起使用，要装载的文件也是框架集。window对象的name属性，它存储的是框架的名字。
一个更加全局化的窗口指针是self，它总是等于window，如果页面上没有框架，window和seft就等于top，frames集合的长度为0。
(2)、窗口操作
moveBy(dx,dy)——把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。Dx值为负数，向左移动窗口，dy值为负数，向上移动窗口。
moveTo(x,y)——移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处，可以使用负数，不过样会把部分窗口移出屏幕的可视区域。
resizeBy(dw,dh)——相对于浏览器窗口的当前大小，把窗口的宽度调整dw个像素，高度调整dy个像素。Dw为负数，缩小窗口的宽度，dy为负数，缩小窗口的高度。
resizeTo(w,h)——把窗口的宽度调整为w，高度调整为h，不能使用负数。
(3)、导航和打开新窗口
用JavaScript可以导航到指定的URL，并用window.open()方法打开新窗口。该方法接受四个参数，即要载入新窗口的页面的URL、新窗口的名字，特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。该窗口的特性由第三个参数（特性字符串）决定。如果省略第三个参数，将打开新的浏览器窗口，就像点击了target被设置为_blank的链接。特性字符串是用逗号分隔的设置列表，在逗号或等于前后不能有空格。它定义新创建的窗口的某些方面。window.open()方法将返回window对象作为它的函数值，该window就是新创建的窗口。
var oNewWin=window.open(“http://www.yiiyaa.net”,yiyawindow”,height=150,width=300,top=10,left=10,resizable=yes”);
oNewWin.moveTo(100,100);
oNewWin.resizeTo(200,200);
oNewWin.close(); //关闭新窗口
alert(oNewWin.opener == window); //outpus “true” 只有在新窗口的最高层window对象才有opener属性。
(4)、系统对话框
alert()方法：只接受一个参数，即要显示给用户的文本，浏览器创建一个具有OK按钮的系统消息框，显示指定的文本。
confirm()方法：只接受一个参数，即要显示的文本，浏览器创建一个具有OK按钮和Cancel按钮的系统消息框，显示指定的文本。该方法返回一个Boolean值，如果点击是OK按钮，返回true，点击的是Cancel按钮，返回false。
prompt()方法：提示用户输入某些信息，接受两个参数，即要显示给用户的文本和文本框中的默认文本。如果点击OK按钮，将文本框中的值作为函数值返回。如果点击Cancel按钮，返回null。
以上三种对话框是模态的，意思是如果用户未点击OK按钮或Cancel按钮关闭对话框，就不能在浏览器窗口中做任何作品。
(5)、状态栏
window.status属性设置状态栏要显示的内容。
window.defaultStatus属性设置状态栏默认显示内容。
(6)、时间间隔和暂停
setTimeout()方法：设置暂停（在指定的毫秒数后执行指定的代码），接受两个参数，要执行的代码和在执行它之前要等待的毫秒数（1/1000秒）。第一个参数可是代码串（与eval()函数的参数相同），也可是函数指针。
clearTimeout()方法：取消还未执行的暂停，并将暂停ID传递给它。
setInterval()方法：设置在每隔指定的时间段就执行一次指定的代码。参数与setTimeout()相同。
clearInterval()方法：用时间间隔ID阻止要执行的代码。参数接受一个时间间隔ID。
var iTimeoutId=setTimeout(“alert(‘Hello World!’)”,1000);
clearTimeout(iTimeoutId);
var iNum=0;
var iMax=100;
var iIntervalId=null;
function incNum(){
iNum++;
if(iNum ==iMax){
clearInterval(iIntervalId);
}
}
iIntervalId=setInteval(iNum,500);
在执行一组指定的代码前等待一段时间使用暂停。如果要反复执行某些代码，使用时间间隔。
(7)、历史
浏览器窗口的历史，就是用户访问过的站点的列表。访问其可以使用window对象的history属性及它的相关方法。
go()方法：只有一个参数，即前进或后退的页面数，如果是负数，就在浏览器历史中后退，如果是正数，就前进。可以使用length属性查看历史中的页面数。
二、document对象
document对象是window对象的属性，window对象的任何属性和方法都可直接访问。它是唯一一个既属性BOM又属性DOM。下表列出了BOM的document对象的一些通用属性：
document对象也有许多集合，提供对载入的页面的各个部分的访问：
可以用数字或名字引用document对象的每个集合。如：document.images[0]
write()方法：在页面输出字符串，只接受一个参数，即要写入有文档的字符串。注意：把<script/>标签写入页面时一定要把”<script/>”字符串分开。writeln()方法：和write()方法功能一样，不同的是将在字符串末尾加一个换行符(\n)。可以使用这种功能动态地引入外部JavaScript文件。
要插入内容属性，必须在完全载入页面前调用write()和writeln()方法。如果任何一个方法是在页面载入后调用的，它将抹去页面的内容，显示指定的内容。在调用write()前，先调用open()方法，写完后，调用close()方法完成显示。
三、location对象
location对象是BOM中最有用的对象之一，它是window对象和document对象的属性。
location对象表示载入窗口的URL，还可以解析URL。
下表列出了BOM的location对象的一些通用属性：
location.assign(“http://www.yiiyaa.net”); //设置窗口的URL，同location.href属性一样
location.replace(“http://www.yiiyaa.net”); //同assign()方法一样，只不过从浏览器历史中删除包含脚本的页面，这样就不能通过浏览器的后退和前进按钮访问它。
reload()方法：重新载入当前页面，只有一个参数，如果是false，则从缓存中载入，如果是true，则从服务器载。最后放在最后一行，因为有可能被执行，有可能不被执行，这由网络延迟和系统资源决定。
toString()方法：返回location.href的值。
四、navigator对象
navigator也是window对象的属性，可以用window.navigator引用它，也可以用navigator引用。
五、screen对象
screen对象可以获取某些关于屏幕的信息。
availHeight——窗口可以使用的屏幕的高度（以像素计），基路包括操作系统需要的空间
availWidth——窗口可以使用的屏幕的宽度（以像素计）。
colorDepth——用户表示颜色的位数，大多系统采用32位。
height——屏幕的高度，以像素计。
width——屏幕的高度，以像素计。
一、window对象
window对象表示整个浏览器窗口，但不必表示其中包含的内容。Window还可用于移动或调整它表示的浏览器的大小。
(1)、window对象在框架中的应用
如果页面使用框架集合，每个框架都由它自己的window对象表示，存放在frames集合中。在frames集合中，可用数字（由0开始，从左到右，逐行的）或名字对框架进行索引。可以用top对象代替window对象（例如：top.frames[0]）。top对象指向的都是最顶层的框架，即浏览器窗口自身。
由于window对象是整个BOM的中心，所以它享有一种特权，即不需要明确引用它，在引用函数、对象或集合时，解释程序都会查看window对象，所以window.frame[0]可以只写frame[0]。
window另一个实例是parent。parent对象与装载文件框架一起使用，要装载的文件也是框架集。window对象的name属性，它存储的是框架的名字。
一个更加全局化的窗口指针是self，它总是等于window，如果页面上没有框架，window和seft就等于top，frames集合的长度为0。
(2)、窗口操作
moveBy(dx,dy)——把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。Dx值为负数，向左移动窗口，dy值为负数，向上移动窗口。
moveTo(x,y)——移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处，可以使用负数，不过样会把部分窗口移出屏幕的可视区域。
resizeBy(dw,dh)——相对于浏览器窗口的当前大小，把窗口的宽度调整dw个像素，高度调整dy个像素。Dw为负数，缩小窗口的宽度，dy为负数，缩小窗口的高度。
resizeTo(w,h)——把窗口的宽度调整为w，高度调整为h，不能使用负数。
(3)、导航和打开新窗口
用JavaScript可以导航到指定的URL，并用window.open()方法打开新窗口。该方法接受四个参数，即要载入新窗口的页面的URL、新窗口的名字，特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。该窗口的特性由第三个参数（特性字符串）决定。如果省略第三个参数，将打开新的浏览器窗口，就像点击了target被设置为_blank的链接。特性字符串是用逗号分隔的设置列表，在逗号或等于前后不能有空格。它定义新创建的窗口的某些方面。window.open()方法将返回window对象作为它的函数值，该window就是新创建的窗口。
| 设置 | 值 | 说明 |
| left | Number | 说明新创建的窗口的左坐标，不能为负数 |
| top | Number | 说明新创建的窗口的上坐标，不能为负数 |
| height | Number | 设置新创建的窗口的高度，该数字不能小于100 |
| width | Number | 设置新创建的窗口的宽度，该数字不能小于100 |
| resizable | yes,no | 判断新窗口是否能通过拖动连线调整大小。默认值是no |
| scrollable | yes,no | 判断新窗口容不下内容时是否允许滚动，默认值是no |
| toolbar | yes,no | 判断新窗口是否显示工具栏，默认值是no |
| status | yes,no | 判断新窗口是否显示状态栏，默认值是no |
| location | yes,no | 判断新窗口是否显示地址栏，默认是no |
oNewWin.moveTo(100,100);
oNewWin.resizeTo(200,200);
oNewWin.close(); //关闭新窗口
alert(oNewWin.opener == window); //outpus “true” 只有在新窗口的最高层window对象才有opener属性。
(4)、系统对话框
alert()方法：只接受一个参数，即要显示给用户的文本，浏览器创建一个具有OK按钮的系统消息框，显示指定的文本。
confirm()方法：只接受一个参数，即要显示的文本，浏览器创建一个具有OK按钮和Cancel按钮的系统消息框，显示指定的文本。该方法返回一个Boolean值，如果点击是OK按钮，返回true，点击的是Cancel按钮，返回false。
prompt()方法：提示用户输入某些信息，接受两个参数，即要显示给用户的文本和文本框中的默认文本。如果点击OK按钮，将文本框中的值作为函数值返回。如果点击Cancel按钮，返回null。
以上三种对话框是模态的，意思是如果用户未点击OK按钮或Cancel按钮关闭对话框，就不能在浏览器窗口中做任何作品。
(5)、状态栏
window.status属性设置状态栏要显示的内容。
window.defaultStatus属性设置状态栏默认显示内容。
(6)、时间间隔和暂停
setTimeout()方法：设置暂停（在指定的毫秒数后执行指定的代码），接受两个参数，要执行的代码和在执行它之前要等待的毫秒数（1/1000秒）。第一个参数可是代码串（与eval()函数的参数相同），也可是函数指针。
clearTimeout()方法：取消还未执行的暂停，并将暂停ID传递给它。
setInterval()方法：设置在每隔指定的时间段就执行一次指定的代码。参数与setTimeout()相同。
clearInterval()方法：用时间间隔ID阻止要执行的代码。参数接受一个时间间隔ID。
var iTimeoutId=setTimeout(“alert(‘Hello World!’)”,1000);
clearTimeout(iTimeoutId);
var iNum=0;
var iMax=100;
var iIntervalId=null;
function incNum(){
iNum++;
if(iNum ==iMax){
clearInterval(iIntervalId);
}
}
iIntervalId=setInteval(iNum,500);
在执行一组指定的代码前等待一段时间使用暂停。如果要反复执行某些代码，使用时间间隔。
(7)、历史
浏览器窗口的历史，就是用户访问过的站点的列表。访问其可以使用window对象的history属性及它的相关方法。
go()方法：只有一个参数，即前进或后退的页面数，如果是负数，就在浏览器历史中后退，如果是正数，就前进。可以使用length属性查看历史中的页面数。
二、document对象
document对象是window对象的属性，window对象的任何属性和方法都可直接访问。它是唯一一个既属性BOM又属性DOM。下表列出了BOM的document对象的一些通用属性：
| 属性 | 说明 |
| alinkColor | 激活的链接的颜色，如<body alink=”color”>定义的 |
| bgColor | 页面的背景颜色，如<body bgcolor=”color”>定义的 |
| fgColor | 页面的文本颜色，如<body text=”color”>定义的 |
| lastModified | 最后修改页页面的日期，是字符串 |
| linkColor | 链接的颜色，如<body link=”color”>定义的 |
| referrer | 浏览器历史中后退一个位置的URL |
| title | <title/>标签中显示的文本 |
| URL | 当前载入的页面的URL |
| vlinkColor | 访问过的链接的颜色，如<body vlink=”color”>定义的 |
| 集合 | 说明 |
| anchors | 页面中的所有锚的集合 |
| applets | 页面中所有applet的集合 |
| embeds | 页面中所有嵌入式对象的集合 |
| forms | 页面中所有表单的集合 |
| images | 页面中所有图像的集合 |
| links | 页面中所有链接的集合 |
write()方法：在页面输出字符串，只接受一个参数，即要写入有文档的字符串。注意：把<script/>标签写入页面时一定要把”<script/>”字符串分开。writeln()方法：和write()方法功能一样，不同的是将在字符串末尾加一个换行符(\n)。可以使用这种功能动态地引入外部JavaScript文件。
要插入内容属性，必须在完全载入页面前调用write()和writeln()方法。如果任何一个方法是在页面载入后调用的，它将抹去页面的内容，显示指定的内容。在调用write()前，先调用open()方法，写完后，调用close()方法完成显示。
三、location对象
location对象是BOM中最有用的对象之一，它是window对象和document对象的属性。
location对象表示载入窗口的URL，还可以解析URL。
下表列出了BOM的location对象的一些通用属性：
| 属性 | 说明 |
| hash | 如果URL包含#，该方法将返回该符号之后的内容 |
| host | 服务器的名字（如www.yiiyaa.net） |
| hostname | 通常等于host，有时会省略前面的www |
| href | 当前载入的页面的完整URL |
| pathname | URL中的主机名后面的部分 |
| port | URL中声明的请求的端口 |
| protocol | URL中使用的协议，即双斜杠之前的部分 |
| search | 执行GET请求的URL中的问号后面的部分（查询字符串） |
location.replace(“http://www.yiiyaa.net”); //同assign()方法一样，只不过从浏览器历史中删除包含脚本的页面，这样就不能通过浏览器的后退和前进按钮访问它。
reload()方法：重新载入当前页面，只有一个参数，如果是false，则从缓存中载入，如果是true，则从服务器载。最后放在最后一行，因为有可能被执行，有可能不被执行，这由网络延迟和系统资源决定。
toString()方法：返回location.href的值。
四、navigator对象
navigator也是window对象的属性，可以用window.navigator引用它，也可以用navigator引用。
五、screen对象
screen对象可以获取某些关于屏幕的信息。
availHeight——窗口可以使用的屏幕的高度（以像素计），基路包括操作系统需要的空间
availWidth——窗口可以使用的屏幕的宽度（以像素计）。
colorDepth——用户表示颜色的位数，大多系统采用32位。
height——屏幕的高度，以像素计。
width——屏幕的高度，以像素计。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript之BOM浏览器对象模型引入
- JavaScript学习之 BOM（浏览器对象模型）
- javascript快速入门13--BOM——浏览器对象模型(Browser Object Model)
- JavaScript window对象 - 浏览器对象模型(BOM),使 JavaScript 有能力与浏览器“对话”
- Javascript BOM即浏览器对象模型Brower Object Model（Window、Navigator、Screen、History、Location、弹出框、计时器）
- javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)
- JavaScript的组成--BOM浏览器对象模型
- javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)
- JavaScript 浏览器对象模型BOM
- JavaScript高级程序设计（第3版）学习笔记·第8章——浏览器对象模型BOM
- JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
- JavaScript 浏览器对象模型BOM使用介绍
- JavaScript——BOM(浏览器对象模型)，时间间隔和暂停
- Javascript浏览器对象模型（BOM）
- JavaScript编程：浏览器对象模型BOM
- 第一百一十一节，JavaScript，BOM浏览器对象模型
- JavaScript之 ------ 浏览器对象模型 （BOM）
- JavaScript网页编程之------浏览器对象模型(BOM)
- JavaScript基础——浏览器对象模型（BOM）
- JavaScript基础——浏览器对象模型(BOM)