BOM也称为浏览器对象模型,它提供了许多用于访问浏览器功能的对象。这些功能与任何网页内容无关;BOM缺乏规范,各浏览器提供商按照自己的思路进行扩展,所以浏览器的通用对象成为事实上的标准;
窗口对象
BOM的核心对象是窗口,代表浏览器的一个实例;//窗口对象处于JavaScript结构的顶层;//对于每个打开的窗口,系统会自动为其定义一个窗口对象。//window对象同时在ECMAScript中扮演global对象的角色,因此在Global作用域中声明的所有变量/函数都将成为window对象的属性和方法;//PS:试图访问未声明的变量会抛出一个错误,但是通过查询窗口对象,可以知道是否存在可能的未声明对象;var newValue=oldValue//=未定义reference error : old value;var new value=window . old value;//=未定义;1.window对象属性和方法window对象有一系列属性,这些属性本身也是对象;
(1).当窗口关闭时,属性属性含义closed为true默认状态信息显示在“默认状态”窗口底部的状态栏中;当前显示在文档窗口中的文档对象;“框架”窗口中的框架对象数组;历史记录保存窗口最近加载的网址;长度窗口中的帧数;当前位置窗口中的网址;窗口的名称;OffscreenBuffering用于绘制新的窗口内容,完成后复制现有内容,控制屏幕更新;开启器打开当前窗口的窗口;父窗口指向包含另一个窗口(由框架使用)的窗口;屏幕显示屏幕相关信息,如高度/宽度(以像素为单位;)self表示当前窗口;状态描述用户交互导致的状态栏临时信息;Top包含特定窗口的最顶层窗口(由框架使用);Window表示当前窗口,相当于self
(2).方法警报(文本)创建一个警报对话框并显示一条消息;模糊()从窗口中移除焦点;ClearInterval(间隔)清除之前设置的定时器间隔;ClearTimeOut(定时器)清除之前设置的超时;Close()关闭窗口;Confirm()创建一个对话框进行确认;Focus()将焦点移动到窗口;Open(url、名称、[选项])打开一个新窗口并返回新窗口对象;提示(文本,缺省输入)创建一个对话框,要求用户输入信息;滚动(x,y)到窗口中像素的位置;Setinterval(表达式,毫秒)计算指定时间间隔后的表达式;Setinterval (function,millisenconds,[arguments])在指定的时间间隔后调用函数;Settimeout(表达式,毫秒)在计时器到期后计算表达式;Stetimeout(函数,毫秒,[参数])在计时器到期后调用函数;Print()调用打印对话框;Find()调出搜索对话框;//可以使用window调用window下的属性和方法。属性和窗口。方法()或直接属性和方法();//window . alert(text)=alert(text);
2.系统对话框浏览器通过alert()/confirm()和prompt()方法调用系统对话框向用户显示信息;系统对话框与浏览器中显示的网页无关,不包含HTML它们的外观是由操作系统和/或浏览器设置决定的,而不是CSS由这些方法打开的对话框是同步的和模态的。也就是说,当这些对话框显示时,代码将停止运行,关闭这些对话框后,代码将恢复执行;
//弹出警告提示(“警告”);//如果(确认('请确认或取消'){//确认()本身有返回值,则确认并取消;提醒('您选择了确定');//按确定返回真;})else{ alert('您选择了取消');//按取消返回假值;}//进入提示框var num=prompt('请输入一个数字',0);//第一个参数是文本提示;第二个参数是输入框模式填充值;并返回输入框中的值;alert(num);//将prompt()方法返回的值赋给变量num并弹出;//调用打印查找对话框print();//打印;弹出浏览器打印窗口;find();//=布尔值;该页面具有匹配的搜索内容,并返回true关于Ctrl+F;//状态栏默认值Status='状态栏默认文本';//浏览器底部状态栏的初始默认值;Status=“状态栏文本”;//设置浏览器底部状态栏中的值;3.创建新窗口(打开())
//使用window.open()方法导航到特定的URL或打开新的浏览器窗口;//它接收四个参数://(1)。要加载的网址;//(2).窗口的名称或目标;//(3).特定的字符串;//(4).一个布尔值,指示新页面是否替换浏览器记录中当前加载的页面;open(' www . Baidu.com ');//chrome-search ://local-NTP/www . Baidu.com;打开失败;需要加http://;open(' http://www . Baidu.com ');//新建页面,跳转到百度;打开(' http://www.baidu.com ','搜索引擎');//新建页面打开百度页面,命名窗口;它不会自动跳转;当再次调用时,它只是刷新页面;open('http://www.baidu.com ',' _ parent ');//在此页面打开百度;“空白”指定打开新页面;//第三个字符串参数的设置值表示宽度值新窗口的宽度,不小于100px新窗口的高度数值高度,不小于100px顶部数字新窗口的y坐标不能为负;左边的值是新窗口的x坐标,不能为负;位置布尔值是否在浏览器窗口中显示地址栏;不同的浏览器有不同的默认值;Menubar boolean在浏览器窗口中显示菜单栏,默认为no;可调整大小的布尔值是否通过拖动浏览器窗口边框来更改大小;默认否;Scrollbars boolean如果页面内容无法显示,是否显示滚动条;默认否;Status boolean在浏览器窗口中显示状态栏,默认为no;工具栏布尔值是否在浏览器中显示工具栏;默认否;全屏布尔浏览器窗口是否最大化;只有IE支持;打开(' http://www.baidu.com ',' baidu ',' width=400,height=400,top=200,left=200,toolbar=yes ');
//open()本身返回window对象var box=open();//返回窗口对象,打开新的空白页;box . alert(“”);//然后指定open()返回的对象打开的新页面弹出窗口;
word窗口操作document.onclick=function(){ //在新窗口中单击documentobjectOpener.document.write('子窗口让我输出!');//此时,文本内容将在其父窗口中生成;}
4.窗口的位置和大小
(1).窗口位置//用于确定和修改窗口对象(浏览器窗口)相对于屏幕的位置://IE Safari Opera Chrome提供screenLeft和screenTop属性,//Firefox提供screenX和screeny属性;//它们分别指示窗口相对于屏幕左侧和顶部的位置;//确定窗口的位置=IE alert(screenLeft);//浏览器左侧到屏幕的距离;//确定窗口的位置=火狐提醒(screenX);//浏览器左侧到屏幕的距离;//跨浏览器方法varleft x=(screen left的类型==' number ')?screenLeft : screenX//判断检测到的screenLeft是否为数值,如果是,使用screenLeft的值,否则使用screenX的值;
(2).窗口大小//检测浏览器窗口本身及其框架的大小:外部宽度和外部高度;警报(外部宽度);警报(外部高度);//检查页面大小属性:innerWidth和innerHeightalert(inner width);警报(内部高度);//PS:IE不提供当前浏览器窗口大小的属性;DOM中提供了相关的方法;//在IE等浏览器中,提供了: document . document element . client width和document . document element . client height。保存页面窗口的信息;//PS:在IE6中,上述属性仅在标准模式下有效;如果是怪异的模式,必须传递document.body.clientWidth和document . body . client height;//如果是火狐等浏览器,直接使用innerWidth和innerHeightvar width=window.innerWidth//在这里添加窗口,因为IE会无效;var height=window.innerHeightif(宽度类型!='number'){ //IE6浏览器if(文档。compat mode==' css1 compat '){//判断是IE6标准模式;使用documentElementwidth=document . document element . client width;height=document . document element . client height;}else{ //否则为IE6非标模式;使用身体;width=document . body . client width;height=document . body . client height;}} //PS:以上方法可以通过不同的浏览器获取每个浏览器窗口可见部分的大小;//document.compatMode可以确定页面是否处于标准模式;//调整浏览器位置;moveTo(0,0);//移动到(0,0)坐标;IE有效;moveBy(10,10);//分别向下和向右移动10pxIE有效;//调整浏览器大小resizeTo(200,200);//调整大小;resizeBy(200,200);//扩大缩小尺寸;5.间歇调用和超时调用1 //JavaScript是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定时间执行;2 //超时值为:在指定时间后执行代码;3 //间隔值:每隔指定时间执行一次代码;
//随着时间的推移,使用窗口对象调用setTimeout()方法;//它接受两个参数:要执行的代码和毫秒数;SetTimeout(function(){ //直接使用函数传入的方法,扩展性好,性能更好;警报('警告!');},1000);//调用setTimeout()后,此方法将返回一个数字ID,表示它已经被调用了一段时间;//此超时调用的ID是计划执行代码的唯一标识符,可用于取消超时调用;//要取消未执行的超时调用计划,可以调用clearTimeout()方法,并将对应的超时调用ID作为参数传递给它;varbox=settimeout(function(){//将超时调用的ID赋给变量box警报(“超时呼叫”);},1000);clearTimeout(方框);//传递ID取消调用方法;//间歇地使用window对象调用setInterval()方法;//它将在指定的时间间隔内重复执行代码,直到间歇调用被取消或页面被卸载;//它接收与setTimeout()相同的参数;var pox=set interval(function(){ alert(' interval call '));},1000);clearInterval(pox);//取消间歇呼叫;//使用setInterval()设置5秒计时器;var num=0;//设置开始秒;var max=5;//设置结束秒;setInterval(函数(){ num//递增numif(num==max){ clearInterval(this);//取消区间调用,这意味着方法本身;跟踪间隔呼叫的标识;警报(“5秒后弹出窗口”);} },1000);//一般用超时调用模拟间隔调用是最好的模式。//因为使用区间调用需要根据情况取消ID,可能会造成一些同步问题;后一个间歇呼叫可以在前一个间歇呼叫结束之前开始;var num=0;var max=5;功能框(){ numif(num==max){ alert(' 5秒后弹出窗口');}else{ setTimeout(box,1000);//1秒后再次执行超时调用;} };setTimeout(方框,1000);//执行定时器;//PS:使用超时调用时,不需要跟踪超时调用ID,因为每次执行后,如果没有设置另一个超时调用,调用会自动停止;两个位置对象
Location是BOM对象之一,提供当前窗口加载的文档相关信息,还提供一些导航功能;事实上,位置对象是窗口对象的属性和文档对象的属性。警报(位置);//获取当前网址
(1).1)的属性所描述的URL内容散列。位置对象。如果该部分存在,则表示锚定部分;主机主机名:端口号;主机名主机名;Href整个网址;路径名;端口端口号;协议协议部分;搜索返回查询字符串('?GWS _ rd=SSL # safe=strict q=ab’),该字符串以问号开头;(2)的赋值()方法。location对象跳转到指定的页面,相当于hrefReload()重新加载当前的URLReplace()用新的URL替换当前页面;
location . hash=“# 1”;//在#后设置字符串并跳转;location.hostname=' Jack//设置主机名;location.search='?id=5 ';//设置?在字符串之后;
//在Web开发中,我们经常需要获取诸如?Id=5search=ok这种类型的URL的键值对;//通过location,我们可以写一个函数来一个一个的得到。函数getArgs(){ //创建一个数组来存储键值对;var args=[];//移除?没有。var qs=location.search.length0?location . search . substring(1):“”;//按字符串拆分数组;var items=QS . split(');var item=null,name=null,value=null//traverse for(var I=0;iitems.lengthi ){ item=items[i]。split('=');name=decodeURIComponent(项[0]);//因为查询字符串已经被浏览器编码;value=decodeURIComponent(项目[1]);//每个查询字符串参数都成为args对象的属性;//将键值对存储在数组中;args[name]=值;}返回参数;} var args=GetArgs();alert(args[' id ']);//获取URL中id对应的值;
复制代码如下: location . assign(' http://www . Baidu.com ');//跳转到指定的网址;2 location . reload();//最有效的重载,可能从缓存加载;location . reload(true);//strong制加载,从服务器源重新加载;5 location oin . replace(' http://www . Baidu.com ');//在此页面跳转到百度页面,避免跳转历史;
三个历史对象
历史对象是窗口对象的属性,保存用户从窗口打开那一刻起上网的记录;
(1)的性质。历史对象
长度历史对象中的记录数;(2)的方法back()。历史对象转到浏览器历史栏的当前URL,类似于backForward()转到浏览器历史条目的下一个URL,类似于forward;Go(num)浏览器在历史对象中前进或后退;
复制代码如下: function back(){ history . back();}函数forward(){ history . forward();}函数go(num){ history . go(num);}//PS:可以通过判断历史来判断是否有历史记录,长度==0;
四个总结
浏览器对象模型(BOM)基于窗口对象,表示浏览器窗口和页面的可见区域。同时,window对象在ECMAScript中也是一个Global对象,所以所有的全局变量和函数都是它的属性,所有的原生构造函数和其他函数也存在于它的命名空间中;(1)可以通过使用位置对象以编程方式访问浏览器的导航系统;设置相应的属性,可以逐段或整体修改浏览器的URL(2).调用replace()方法导航到一个新的URL,该URL将替换浏览器历史记录中当前显示的页面;(3)环境。屏幕对象:存储与客户端显示相关的信息,一般只用于站点分析;(4)环境。历史对象:为访问浏览器的历史记录打开了一个小缺口,开发者可以据此判断历史记录的数量,也可以向后或向前导航到历史记录中的任意页面;