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

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

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

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

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

1.window对象的属性和方法
window对象有一系列的属性,这些属性本身也是对象;

(1).属性
属性含义
closed 当窗口关闭时为真;
defaultStatus 窗口底部状态栏显示的默认状态信息;
document 窗口中当前显示的文档对象;
frames 窗口中的框架对象数组;
history 保存有窗口最近加载的URL;
length 窗口中的框架数;
location 当前窗口中的URL;
name 窗口名;
offscreenBuffering 用于绘制新窗口内容并在完成后复制已存在的内容,控制屏幕更新;
opener 打开当前窗口的窗口;
parent 指向包含另一个窗口的窗口(由框架使用);
screen 显示屏幕相关信息,如高度/宽度(以像素为单位;)
self 指示当前窗口;
status 描述由用户交互导致的状态栏的临时信息;
top 包含特定窗口的最顶层窗口(由框架使用);
window 指示当前窗口,与self等效;

(2).方法
alert(text) 创建一个警告对话框,显示一条信息;
blur() 将焦点从窗口移除;
clearInterval(interval) 清除之前设置的定时器间隔;
clearTimeOut(timer) 清除之前设置的超时;
close() 关闭窗口;
confirm() 创建一个需要用于确认的对话框;
focus() 将焦点移至窗口;
open(url,name,[options]) 打开一个新窗口并返回新window对象;
prompt(text,defaultInput) 创建一个对话框要求用户输入信息;
scroll(x,y) 在窗口中滚动到一个像素点的位置;
setInterval(expression,milliseconds) 经过指定时间间隔计算一个表达式;
setInterval(function,millisenconds,[arguments]) 经过指定时间间隔后调用一个函数;
setTimeout(expression,milliseconds) 　　　　　　　在定时器超过后计算一个表达式;
steTimeout(function,milliseconds,[arguments]) 在定时器超过后调用一个函数;
print() 调出打印对话框;
find() 调出查找对话框;
// window下的属性和方法,可以使用window.属性、window.方法()或者直接属性、方法()的调用;
// window.alert(text)=alert(text);

2.系统对话框
浏览器通过alert()/confirm()和prompt()方法调用系统对话框向用户显示信息;
系统对话框与浏览器中显示的网页没有关系,也不包含HTML;
它们的外观由操作系统及(或)浏览器设置决定,而不是由CSS决定;
这几个方法打开的对话框都是同步和模态的;也就是说,显示这些对话框的时候代码会停止运行,而关掉这些对话框后代码又会恢复执行;

// 弹出警告

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 = '状态栏文本'; // 浏览器底部状态栏设置值;

3.新建窗口(open())

// 使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口;
// 它接收四个参数:
// (1).要加载的URL;
// (2).窗口的名称或窗口目标;
// (3).一个特定字符串;
// (4).一个表示新页面是否取代浏览器记录中当前加载页面的布尔值;
open('www.baidu.com'); // chrome-search://local-ntp/www.baidu.com;打开失败;需要添加http://;
open('http://www.baidu.com'); // 新建页面并跳转到百度;
open('http://www.baidu.com','搜索引擎'); // 新建页面打开百度页面并命名窗口;并不会自动跳转;并且再次调用时只是刷新那个页面;
open('http://www.baidu.com','_parent'); // 在本页面打开百度;'_blank'是指定新页面打开;
// 第三个字符串参数
设置值说明
width 数值新窗口的宽度,不小于100px;
height 数值新窗口的高度,不小于100px;
top 数值新窗口的Y坐标,不能是负值;
left 数值新窗口的X坐标,不能是负值;
location boolean 是否在浏览器窗口中显示地址栏;不同浏览器默认值不同;
menubar boolean 是否在浏览器窗口显示菜单栏,默认为no;
resizable boolean 是否通过拖动浏览器窗口边框来改变大小;默认no;
scrollbars boolean 如果页面内容显示不下,是否显示滚动条;默认no;
status boolean 是否在浏览器窗口中显示状态栏,默认no;
toolbar boolean 是否在浏览器中显示工具栏;默认no;
fullscreen boolean 浏览器窗口是否最大化;仅IE支持;
open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');

// open()本身返回window对象
var box = open(); // 返回了一个window对象,打开了一个新空白页面;
box.alert(''); // 然后指定在open()返回的对象打开的新页面弹窗;

// 字窗口操作父窗口
document.onclick = function(){　　　　　　　　 // 在新的窗口中点击docuement对象;
opener.document.write('子窗口让我输出的!');// 此时在产生它的父窗口会生成文字内容;
}

4.窗口的位置和大小

(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).窗口的大小

// 检测浏览器窗口本身及边框的尺寸: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可以确定页面是否处于标准模式;

// 调整浏览器位置;

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

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

// 调整浏览器大小

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

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

5.间歇调用和超时调用
1 // JavaScript是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行;
2 // 超时值:在指定的时间过后执行代码;
3 // 间隔值:每隔指定的时间就执行一次代码;

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

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

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

alert('警告!');

},1000);

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

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

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

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

alert('超时调用');

},1000);

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

// 间歇调用使用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);

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

// 因为使用间隔调用需要根据情况来取消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,因为每次执行之后,如果不再设置另一个超时调用,调用就会自动停止;

二 location对象

location是BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能;
事实上,location对象是window对象的属性,也是document对象的属性;
alert(location); // 获取当前的URL

(1).location对象的属性
属性描述的URL内容
hash 如果该部分存在,表示锚点部分;
host 主机名:端口号;
hostname 主机名;
href 整个URL;
pathname 路径名;
port 端口号;
protocol 协议部分;
search 返回URL的查询字符串('?gws_rd=ssl#safe=strict&q=ab'),这个字符串以问号开头;
(2).location对象的方法
assign() 跳转到指定页面,与href等效;
reload() 重载当前URL;
replace() 用新的URL替换当前页面;

location.hash = '#1'; // 设置#后的字符串,并跳转;
location.hostname = 'Jack'; // 设置主机名;
location.search = '?id=5'; // 设置?后的字符串;

// 在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参数说明,如果不使用第三个参数，将打开一个新的普通窗口

参数名称	类型	说明
height	Number	设置窗体的高度，不能小于100
left	Number	说明创建窗体的左坐标，不能为负值
location	Boolean	窗体是否显示地址栏，默认值为no
resizable	Boolean	窗体是否允许通过拖动边线调整大小，默认值为no
scrollbars	Boolean	窗体中内部超出窗口可视范围时是否允许拖动，默认值为no
toolbar	Boolean	窗体是否显示工具栏，默认值为no
top	Number	说明创建窗体的上坐标，不能为负值
status	Boolean	窗体是否显示状态栏，默认值为no
width	Number	创建窗体的宽度，不能小于100

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

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属性