BOM

　　BOM也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能，BOM缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准，所以，BOM本身是没有标准的或者还没有那个组织去标准它

window对象

　　BOM的核心对象时window，它表示浏览器的一个实例，window对象处于javascript结构的最高层，对于每个打开的窗口，系统都会自动为其定义window对象

　　1.windows对象是最顶层的对象。

　　2.window对象有六大属性，这六大属性本身也是对象。

　　3.window对象旗下的document属性，也是对象，并且document对象旗下有五大属性。

　　4.document对象旗下的五大属性又是对象，总结都是对象。

window对象有一系列的属性，这些属性本身也是对象

　　　　　　　　　　window对象的属性

　　closed　　　　　　　　当窗口关闭时为真

　　defaultstatus　　　　　　窗口底部状态栏显示的默认状态消息

　　document　　　　　　  窗口中房钱显示文档对象

　　frames　　　　　　　　窗口中框架对象数组

　　history　　　　　　　　保存有窗口最近加载的URL

　　length　　　　　　　　窗口中的框架数

　　location　　　　　　　　当前窗口的URL

　　name　　　　　　　　　　窗口名

　　offecreenbuffering　　　　　　　用于绘制新窗口内容并在完成后复制已存在的内容，控制屏幕更新

　　opener　　　　　　　　打开当前窗口的窗口

　　parent　　　　　　　　指向包含另一个窗口的窗口(由框架使用)

　　screen　　　　　　　　显示屏幕相关信息，如高度、宽度、(以像素为单位）

　　self　　　　　　　　　　描述由用户交互导致的状态栏的临时消息

　　top　　　　　　　　包含特定窗口的最顶层窗口(由框架使用)

　　window　　　　　　　　指示当前窗口，与self等效　　

 

　　　　　　　　　　　　window对象的方法

 　　　　方法　　　　　　　　　　　　功能

　　alert（text）　　　　　　　　创建一个警告对话框，显示一条信息

　　blur（）　　　　　　　　　　将焦点从窗口移除

　　clearInterval（）　　　　　　　　　　清楚之前设置的定时器间隔

　　clearTimeOut（Timer）　　　　　　　　清楚之前设置的超时

　　close（）　　　　　　　　　　关闭窗口

　　confirm（）　　　　　　　　　　创建一个需要用户确认的对话框

　　focus（）　　　　　　　　　　将焦点移至窗口

　　open（url,name,[opation]）　　　　　　　　　　打开一个新窗口并返回新window对象

　　prompt（text，defaultInput）　　　　　　　　　　创建一个对话框要求用户输入信息

　　scroll（x,y）　　　　　　　　　　在窗口滚动到一个像素点的位置

　　setInterval（expression，millisecods）　　　　　　　　　　经过指定时间间隔计算一个表达式

　　setInterval（function,millsencodes,[arguments]）　　　　　　　　　　讲过指定时间间隔后调用一个函数

　　print（）　　　　　　　　　　调出打印对话框

　　find（）　　　　　　　　　　调出查找对话框

window下的属性和方法，可以使用window.属性、windo.方法（）或直接属性、方法（）的方式调用

　　例如：

　　　　window.alert()　　　　　　　　alert（）以一个意思   因为我们最顶层的对象时window

2.系统对话框

　　浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。系统对话框与浏览器中显示的网页没有关系，也不包含HTML。

//有些浏览器不支持直接写属性或方法，那么或把这个属性直接当作变量来使用
//如：closed=123; 
//强制性   window.closed()   所有浏览器都认识
//确定或取消
if (confirm('确定或取消')) {    //确定返回true  取消返回false
    alert('你按了确定！');
}else{
    alert('你按了取消！');
}


//弹出警告
alert('lee');

//输入提示框
var mun=prompt('请输入一个数字'，0);      //两个参数  第一个是提示  第二个是参数  默认值   输入框0 
alert(mun);

//调出打印机查找对话框
print();
find();

3.新建窗口

　　使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口，它可以接收4个参数

　　　　1.要加载的URL

　　　　2.窗口名称或窗口目标

　　　　3.一个特性字符串

　　　　4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值

open('http://www.baidu.com');            //新建页面并打开百度
open('http://www.baidu.com','百度');        //新建页面并命名窗口打开百度，以后再打开百度都会在一个窗口
open('http://www.baidu.com','_blank')//在本页窗口打开百度，_blank是新建

//PS：不命名会每次打开新窗口，命名的第一次打开新窗口，之后在这个窗口中加载，窗口
//窗口目标是提供页面的打开的方式，比如本页面，还是新建

　　　　　　　　　　　　第三字符串参数

设置　　　　　　值　　　　　　　　说明

width　　　　　数值　　　　　　新窗口的宽度，不能小于100

height　　　　数值　　　　　　新窗口的高度，不能小于100

top　　　　　　数值　　　　　　新窗口的Y坐标，不能是负值

left　　　　　　数值　　　　　　新窗口的X坐标，不能是负值

location　　　　yes或no　　　　是否在浏览器窗口中显示地址栏，不同浏览器默认值不同

menubar　　　　yes或no　　　　是否在浏览器窗口显示菜单栏，默认为no

 resizable　　　　yes或 no　　　　是否可以通过拖动浏览器冲口的边框改变大小。默认为no

scrollbars　　　　yes或no　　　　如果内容在页面中显示不下，是否允许关东，默认为no

status　　　　　　yes或no　　　　是否在浏览器窗口中显示状态栏，默认为no

toolbar　　　　　yes或no　　　　　是否在浏览器窗口中显示工具栏，默认为no

fullscreen　　　　yes或no　　　　 浏览器窗口是否最大化，仅限IE

open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=100,status=yes');

3.窗口的位置和大小

　　用来确定和修改window位置的属性和方法有很多，IE、Safari、opera和charome都提供了screenleft和screentop属性，分别用于表示窗口相对于屏幕左边和上边的位置。firefox则在screenX和screenY属性中提供相同的窗口位置信息，safari和chrome也同时支持者两个属性。

alert(screenLeft);   //IE支持     
alert(screenTop);    

//以上两个属性，火狐不认识。属性前加一个window对象就认识了
alert(typeof screenLeft);  

alert(screenX);                //IE支持，支持火狐
alert(screenY);

//跨浏览器的方法
var Left=(typeof screenLeft=='number')?screenLeft:screenX;
var Top=(typeof screenTop=='number')?screenTop:screenY;

alert(Left);
alert(Top);

　　窗口页面大小，firefox、safari、opera、和chrome均为此提供了4个属性：innerWidth和innerHerght，返回浏览器窗口本身的吃尺寸；outerWidth和outerHerght，返回浏览器窗口本身及边框的尺寸。

alert(innerWidth);
alert(innerHeight);
alert(outerWidth);                //页面长度+边框
alert(outerHeight);                //页面高度+边框
//PS：在Cheome中，innerWidth、outerWidth、innerHeight、outerHeight；
//IE没有提供当前浏览器窗口尺寸的属性：不过，在后面的DOM课程中有提供相关方法

　　在IE以及firefox、Safari、opera和chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面窗口的信息。

//调整浏览器位置
moveTo(0,0)     //IE有效，移动到0,0坐标
moveBy(10,10)    //IE有效，向下和右分别移动10像素


//调整浏览器大小
resizeTo(200,200);        //IE有效，调整大小
resizeBy(200,200);        //IE有效，扩展收缩大小
PS 由于此类方法被浏览器禁用较多，用处不大。

4.间歇调用和超时调用

　　javascript是单线程语言，单他允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

　　超时调用需要使用window对象的setTimeout()方法，它接受两个参数：要执行的代码和毫秒数的超时时间。

setTimeout("alert('Lee')",3000);    
//超时3秒执行alert('Lee')但是不建议直接使用字符串

function box(){
    alert('您的请求超时了');            
};

setTimeout(box,5000);            //直接传入函数名即可


setTimeout(function(){　　　　　　//推荐做法
    alert("超时8秒钟");
},8000);

　　调用setTimeout()之后，该方法会返回一个数值ID表示超时调用，这个超时调用的ID是计划执行代码的唯一标识符，可以通过他来取消超时调用

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

var box=setTimeout(function(){
    alert("超时8秒钟");
},8000);

clearTimeout(box);     //本身要在8秒钟之后执行“超时8秒钟”的   清楚后不在执行间歇

间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码。直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()。它接受的参数与setTimeout()相同：要执行的代码和每次执行之前需要等待的毫秒数　　　　不常用

var box=setInterval(function (){    //重复不停执行
    alert('还有1天就要出发了');
},2000);

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

location对象

 　　location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能，事实上，location对象时window对象的属性，也是document对象的属性：所以window.location 和document.location等效。

　　　　属性　　　　　　　　　　　　　　　　描述的URL内容

　　hash　　　　　　　　　　　　　　　　如果该部分存在，表示锚点部分

　　host　　　　　　　　　　　　　　　　主机名：端口号

　　hostname　　　　　　　　　　　　　　主机名

　　href　　　　　　　　　　　　　　　　整个URL

　　pathname　　　　　　　　　　　　　　路径名

　　port　　　　　　　　　　　　　　　　端口号

　　protocol　　　　　　　　　　　　　　协议部分

　　search　　　　　　　　　　　　　　查询字符串

　　　　　　　　　　　location对象的方法

　　　　　　　　　　方法　　　　　　　　　　　　　　功能

　　　　　　　　assign()　　　　　　　　　　　　跳转到指定页面，与href等效

　　　　　　　　reload()　　　　　　　　　　　　重载当前URL

　　　　　　　　repalce　　　　　　　　　　　　用新的URL替换当前页面

alert(location); //获取当前的URL alert(document.location); //一样 和window.location等效 location.hash='#66'; //设置锚点 alert(location.hash); location.port=8888; //设置端口号 alert(location.port);

location.href='http://www.baidu.com';   //跳转百度

　　在WEB开发中，我们经常需要获取诸如？id=5&search=ok这种类型的URL的键值对，那么通过loction我们可以写一个函数，来一一获取。

　　

// location.search='?id-5&search=ok';    //浏览器设置
function get(){
    var ages=[];        //定义数组
    var qs=location.search.length>0?location.search.substring(1):'';   //截取？
    var itmes=qs.split('&');            //以&分组
    var itme=null,name=null,value=null;        //定义变量        
    for(var i=0;i<itmes.length;i++){
        itme=itmes[i].split('=');    //以=号 拆分  获取id，5      search，ok
        name=itme[0];        //name=id,search
        value=itme[1]        //value=5，ok
        ages[name]=value;        //把键值对保存在ages数组中  方式为id=5  search=ok
    };
    return ages;            //返回数组
};

var ages=get();
alert(ages['id']);
alert(ages['search']);

location.assign('http://www.baidu.com');    //跳转百度  没有location.href效果好
location.reload(); //最有效的重新加载，有可能从缓存加载
location.reload(true);    //强制加载，从服务器源头重新加载
location.replace('http://www.baidu.com');    //可以避免产生跳转前的历史记录

history对象

 　　history对象时winsow对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起。

　　　　　　　　　　　　history对象的属性

　　　　　　　　属性　　　　　　　　　　　　描述URL中的那部分

　　　　　　　　length　　　　　　　　　　　　history对象中的记录数

　　　　　　　　　　　　history对象的方法

　　　　　　

　　　　　　　　方法　　　　　　　　　　　　　　功能

　　　　　　back()　　　　　　　　　　　　　　前往浏览器历史条目前一个URL，类似后退

　　　　　　forvard()　　　　　　　　　　　　　前往浏览器历史条目下一个URL，类似前进

　　　　　　go（num）　　　　　　　　　　　　浏览器在history对象中向前或向后

alert(history.length);       //历史记录的总数
history.back();            //向前
history.forward();        //向后
history.go(1);                //向前或向后