BOM （Browser Object Model） 浏览器对象模型

l对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法;

// PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存在;

var newValue = oldValue; // =>ReferenceError:oldValue is not defined;

var newValue = window.oldValue; // =>undefined;

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

// 弹出警告

alert(‘警告‘);

// 确认和取消

if(confirm(‘请确定或取消‘){ // confirm()本身有返回值;

alert(‘您选择了确定‘); // 按确定,返回true值;

})else{

alert(‘您选择了取消‘); // 按取消,返回false值;

}

// 输入提示框

var num = prompt(‘请输入一个数字‘,0); // 第一个参数是文字提示;第二个参数是输入框模式填充值;并返回输入框中的值;

alert(num); // 将prompt()方法返回的值赋给变量num;并弹出;

// 调用打印及查找对话框

print(); // 打印; 弹出浏览器打印窗口;

find(); // =>boolean;页面有匹配的查找内容返回true;相对于Ctrl+F;

// 状态栏

defaultStatus = ‘状态栏默认文本‘; // 浏览器底部状态栏初始默认值;

status = ‘状态栏文本‘; // 浏览器底部状态栏设置值;

2

3

4

5

6

7

8

9

10

11

12

13

14

(1).窗口的位置

// 用来确定和修改window对象(浏览器窗口)相对于屏幕的位置:

// IE+Safari+Opera+Chrome都提供了screenLeft和screenTop属性,

// Firefox提供了screenX和screeY属性;

// 他们分别表示窗口看相对于屏幕左边和上边的位置;

// 确定窗口的位置=>IE

alert(screenLeft); // 浏览器左侧离屏幕的距离;

// 确定窗口的位置=>Firefox

alert(screenX); // 浏览器左侧离屏幕的距离;

// 跨浏览器的方法

var leftX = (typeof screenLeft == ‘number‘) ? screenLeft : screenX;

// 判断检测的screenLeft是否是数值,若是则使用screenLeft的值,否则使用screenX的值;

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

(2).窗口的大小

// 检测浏览器窗口本身及边框的尺寸:outerWidth和outerHeight;

alert(outerWidth);

alert(outerHeight);

// 检测页面大小属性:innerWidth和innerHeight;

alert(innerWidth);

alert(innerHeight);

// PS:IE没有提供当前浏览器窗口尺寸的属性; 在DOM中有提供相关的方法;

// 在IE及其他浏览器中,提供了:document.documentElement.clientWidth和document.documentElement.clientHeight;来保存页面窗口的信息;

// PS:在IE6中,上述属性在标准模式下才有效;如果是怪异模式,就必须通过document.body.clientWidth和document.body.clientHeight;

// 如果是Firefox等浏览器,直接使用innerWidth和innerHeight;

var width = window.innerWidth; // 这里要加window,因为IE会无效;

var height = window.innerHeight;

if(typeof width != ‘number‘){ // IE6浏览器

if(document.compatMode == ‘CSS1Compat‘){ // 判断是IE6标准模式;使用documentElement;

width = document.documentElement.clientWidth;

height = document.documentElement.clientHeight;

}else{ // 否则是IE6非标准模式;使用body;

width = document.body.clientWidth;

height = document.body.clientHeight;

}

}

// PS:以上方法可以通过不同浏览器取得各自的浏览器窗口可视部分的大小;

// document.compatMode可以确定页面是否处于标准模式;

2

3

4

5

6

7

// 调整浏览器位置;

moveTo(0,0); // 移动到(0,0)坐标;IE有效;

moveBy(10,10); // 向下和向右分别移动10px;IE有效;

// 调整浏览器大小

resizeTo(200,200); // 调整大小;

resizeBy(200,200); // 扩展收缩大小;

2

3

4

5

6

7

8

9

10

11

12

// 超时调用使用window对象的setTimeout()方法;

// 它接受两个参数:要执行的代码和毫秒数;

setTimeout(function(){ // 直接使用函数传入的方法,扩展性好,性能更加;

alert(‘警告!‘);

},1000);

// 调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用;

// 这个超时调用的ID是计划执行代码的唯一标识符,可以通过它来取消超时调用;

// 要取消尚未执行的超时调用计划,可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它;

var box = setTimeout(function(){ // 将超时调用的ID赋值给变量box;

alert(‘超时调用‘);

},1000);

clearTimeout(box); // 将ID传入取消调用方法;

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// 间歇调用使用window对象的setInterval()方法;

// 它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或页面被卸载;

// 它接收的参数与setTimeout()相同;

var pox = setInterval(function(){

alert(‘间隔调用‘);

},1000);

clearInterval(pox); // 取消间歇调用;

// 利用setInterval()设置一个5秒的定时器;

var num = 0; // 设置起始秒;

var max = 5; // 设置终止秒;

setInterval(function(){

num++; // 递增num;

if(num == max){

clearInterval(this); // 取消间隔调用,this表示方法本身;一直跟踪间隔调用的ID;

alert(‘5秒后弹窗‘);

}

},1000);

2

3

4

5

6

7

8

9

10

11

12

13

14

// 一般使用超时调用来模拟间隔调用是一种最佳模式;

// 因为使用间隔调用需要根据情况来取消ID,并且可能造成同步的一些问题;后一个间歇调用可能会在前一个间歇调用结束之前启动;

var num = 0;

var max = 5;

function box(){

num++;

if(num == max){

alert(‘5秒后弹窗‘);

}else{

setTimeout(box,1000); // 隔1秒之后再次执行一个超时调用;

}

};

setTimeout(box,1000); // 执行定时器;

// PS:在使用超时调用时,没必要跟踪超时调用ID,因为每次执行之后,如果不再设置另一个超时调用,调用就会自动停止;

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

// 在Web开发中,我们经常需要获取诸如?id=5&search=ok这种类型的URL的键值对;

// 通过location,我们可以写一个函数,来一一获取;

function getArgs(){

// 创建一个存放键值对的数组;

var args = [];

// 去除?号;

var qs = location.search.length>0?location.search.substring(1):‘‘;

// 按&字符串拆分数组;

var items = qs.split(‘&‘);

var item = null, name = null, value = null;

//遍历

for(var i = 0; i<items.length; i++){

item = items[i].split(‘=‘);

name = decodeURIComponent(item[0]); // 因为查询字符串被浏览器编码过;

value = decodeURIComponent(item[1]);// 每个查询字符串参数都变成了args对象的属性;

// 把键值对存放到数组中;

args[name] = value;

}

return args;

}

var args = getArgs();

alert(args[‘id‘]); // 获取URL中id对应的值;

代码如下:

location.assign(‘http://www.baidu.com‘); // 跳转到指定的URL;2 
location.reload(); // 最有效的重新加载,有可能从缓存加载;
location.reload(true); // 强制加载,从服务器源头重新加载;5 
locatioin.replace(‘http://www.baidu.com‘); // 在本页跳转到百度页面,并且可以避免产生跳转的历史记录;

三 history对象

history对象是window对象的属性,它保存着用户上网的记录,从窗口被打开的那一刻算起;

(1).history对象的属性

length history对象中的记录数;
(2).history对象的方法
back() 前往浏览器历史条目前一个URL,类似后退;
forward() 前往浏览器历史条目下一个URL,类似前进;
go(num) 浏览器在history对象中向前或向后;

复制代码 代码如下:

function back(){
history.back();
}
function forward(){
history.forward();
}
function go(num){
history.go(num);
}
// PS:可以通过判断history.length == 0,得到是否有历史记录;

四 小结

浏览器对象模型(BOM)以window对象为依托,表示浏览器窗口以及页面可见区域;
同时window对象还是ECMAScript中的Global对象,因而所有全局变量和函数都是它的属性,且所有原生的构造函数及其他函数也都存在于它的命名空间下;
(1).使用location对象可以通过编程方式来访问浏览器的导航系统;设置相应的属性,可以逐段或整体性地修改浏览器的URL;
(2).调用replace()方法可以导航到一个新的URL,同时该URL会替换浏览器历史记录中当前显示的页面;
(3).screen对象:保存着与客户端显示器有关的信息,这些信息一般只用于站点分析;
(4).history对象:为访问浏览器的历史记录开了一个小缝隙,开发人员可以据此判断历史记录的数量,也可以在历史记录中向后或向前导航到任意页面;

二：：：

什么是BOM？

• BOM是Browser Object Model的缩写，简称浏览器对象模型
• BOM提供了独立于内容而与浏览器窗口进行交互的对象
• 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
• BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程序技术工作组目前正在努力促进BOM的标准化）
• BOM最初是Netscape浏览器标准的一部分

能利用BOM做什么？

BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！！！

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象，例如下面两行代码是一样的：

    document.write("BOM");
    window.document.write("BOM");

window -- window对象是BOM中所有对象的核心。window对象表示整个浏览器窗口，但不必表示其中包含的内容。此外，window还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。

JavaScript中的任何一个全局函数或变量都是window的属性

window子对象

• document 对象
• frames 对象
• history 对象
• location 对象
• navigator 对象
• screen 对象

window对象关系属性

• parent：如果当前窗口为frame，指向包含该frame的窗口的frame （frame）
• self ：指向当前的window对象，与window同意。 （window对象）
• top ：如果当前窗口为frame，指向包含该frame的top-level的window对象
• window ：指向当前的window对象，与self同意。
• opener ：当窗口是用javascript打开时，指向打开它的那人窗口（开启者）

window对象定位属性

• IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置，但未提供任何判断窗口大小的方法。用document.body.offsetWidth和document.body. offsetHeight属性可以获取视口的大小（显示HTML页的区域），但它们不是标准属性。
• Mozilla提供window.screenX和window.screenY属性判断窗口的位置。它还提供了window.innerWidth和window.innerHeight属性来判断视口的大小，window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。

window对象的方法

窗体控制

moveBy(x,y)——从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体

moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会吧窗体移出屏幕的可视区域

resizeBy(w,h)——相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体

resizeTo(w,h)——把窗体宽度调整为w个像素，高度调整为h个像素

窗体滚动轴控制

scrollTo(x,y)——在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置

scrollBy(x,y)—— 如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)

窗体焦点控制

focus()—— 使窗体或控件获取焦点

blur()——与focus函数相反，使窗体或控件失去焦点

新建窗体

open()——打开(弹出)一个新的窗体

close()——关闭窗体

opener属性——新建窗体中对父窗体的引用，中文"开启者"的意思

window.open方法语法

    window.open(url, name, features, replace);

open方法参数说明

• url -- 要载入窗体的URL
• name -- 新建窗体的名称(目标,将在a 标签的target属性中用到，当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式，因此页面都将以弹出的方式打开
• features -- 代表窗体特性的字符串，字符串中每个特性使用逗号分隔
• replace -- 一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定

open函数features参数说明,如果不使用第三个参数，将打开一个新的普通窗口

　 特性字符串中的每个特性使用逗号分隔，每个特性之间不允许有空格

open方法返回值为一个新窗体的window对象的引用

对话框

alert(str)—— 弹出消息对话框（对话框中有一个“确定”按钮）

confirm(str)—— 弹出消息对话框（对话框中包含一个“确定”按钮与“取消”按钮）

prompt(str,defaultValue)——弹出消息对话框（对话框中包含一个“确定”按钮、“取消”按钮与一个文本输入框），由于各个浏览器实现的不同，若没有第二个参数（文本框中的默认值）时也最好提供一个空字符串

状态栏

window.defaultStatus 属性——改变浏览器状态栏的默认显示(当状态栏没有其它显示时)，浏览器底部的区域称为状态栏，用于向用户显示信息

window.status 属性——临时改变浏览器状态栏的显示

时间等待与间隔函数

setTimeout()—— 暂停指定的毫秒数后执行指定的代码

clearTimeout()——取消指定的setTimeout函数将要执行的代码

setInterval()——间隔指定的毫秒数不停地执行指定的代码

clearInterval()——取消指定的setInterval函数将要执行的代码

setTimeout与setInterval方法有两个参数，第一个参数可以为字符串形式的代码，也可以是函数引用，第二个参数为间隔毫秒数,它们的返回是一个可用于对应clear方法的数字ID

    var tid = setTimeout("alert(‘1‘)",1000);
    alert(tid);
    clearTimeout(tid);

History对象,在浏览器历史记录中导航

History 对象的属性:length 返回浏览器历史列表中的 URL 数量

History 对象的方法

• back() 加载 history 列表中的前一个 URL
• forward() 加载 history 列表中的下一个 URL
• go(num) 加载 history 列表中的某个具体页面

Location 对象

Location 对象的属性

• hash 设置或返回从井号 (#) 开始的 URL（锚）
• host 设置或返回主机名和当前 URL 的端口号
• hostname 设置或返回当前 URL 的主机名
• href 设置或返回完整的 URL
• pathname 设置或返回当前 URL 的路径部分
• port 设置或返回当前 URL 的端口号
• protocol 设置或返回当前 URL 的协议
• search 设置或返回从问号 (?) 开始的 URL（查询部分）

Location 对象的方法

• assign() 加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是一样的
• reload() 重新加载当前文档，如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
• replace() 用新的文档替换当前文档，replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前纪录。

Navigator对象

Navigator 对象的属性

• appCodeName 返回浏览器的代码名
• appName 返回浏览器的名称
• appVersion 返回浏览器的平台和版本信息
• browserLanguage 返回当前浏览器的语言
• cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
• cpuClass 返回浏览器系统的 CPU 等级
• onLine 返回指明系统是否处于脱机模式的布尔值
• platform 返回运行浏览器的操作系统平台
• systemLanguage 返回 OS 使用的默认语言
• userAgent 返回由客户机发送服务器的 user-agent 头部的值
• userLanguage 返回 OS 的自然语言设置

框架与多窗口通信

子窗口与父窗口

只有自身和使用window.open方法打开的窗口和才能被JavaScript访问,window.open方法打开的窗口通过window.opener属性来访问父窗口。 而在opener窗口中，可以通过window.open方法的返回值来访问打开的窗口！

框架

window.frames集合：在框架集或包含iframe标签的页面中，frames集合包含了对有框架中窗口的引用

    alert(frames.length);//框架的数目
    alert(frames[0].document.body.innerHTML);//使用下标直接获取对框架中窗口的引用
    //不但可以使用下标，还可以使用frame标签的name属性
    alert(frames["frame1"].document.title);

在框架集中还可以使用ID来获取子窗口的引用

    var frame1 =document.getElementById("frame1");//这样只是获取了标签
    var frame1Win = frame1.contentWindow;//frame对象的contentWindow包含了窗口的引用
    //还可以直接获取框架中document的引用
    var frameDoc = frame1.contentDocument;
    alert(frameDoc);//但IE不支持contentDocument属性