Fork me on GitHub

JavaScript中的BOM对象

  使用浏览器对象模型BOM,可以实现与HTML的交互。它的作用是将相关元素组织包装起来,提供给程序设计人员使用,从而减轻开发人员的劳动,提高设计Web页面的能力。

    在JavaScript中对象之间并不是独立存在的,对象与对象之间有着层次关系。如Document对象是Window对象的子对象。浏览器对象模型就 是用于描述这种对象与对象之间层次关系的模型,该对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览 器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

    ●浏览器对象(navigator):提供有关浏览器的信息
    ●窗口对象(window):window对象处于对象层次的最顶端,它提供了处理Navigator窗口的方法和属性
    ●框架对象(frame):包含了框架的版面布局信息,以及每一个框架所对应的窗口对象
    ●位置对象(location):提供了与当前打开的URL一起工作的方法和属性,是一个静态的对象
    ●历史对象(history):提供了与历史清单有关的信息
    ●文档对象(document):包含了与文档元素一起工作的对象,它将这些元素封装起来供编程人员使用。文档对象是浏览器对象模型的核心,对于实现Web页面信息交互起到关键作用。

window对象
    window对象是浏览器对象中的默认对象。所以可以隐式地引用window对象的属性和方法。例如window.alert("你好");和 alert("你好");是等价的。window对象表示浏览器中打开的窗口,提供关于窗口状态的信息。可以用window对象访问窗口中绘制的文档、窗口中发生的事件和影响窗口的浏览器特性。常用的window对象的方法及其作用如下:

方法              作用 
alert             显示带消息和OK按钮的alert对话框
blur              使对象失去焦点并激活onBlur事件
clearInterval  取消由setInterval启动的间隔
clearTimeout  取消由setTimeout设置的超时
close            关闭当前浏览器窗口
confirm         显示带消息和OK按钮及Cancel 按钮的确认对话框
execScript     执行指定的脚本
focus           使控件取得焦点并执行由onFocus事件指定的代码
navigate       显示某个URL,只用于VBScript
open            打开新窗口并装入指定URL文档
prompt         显示带消息和输入字段的提示对话框
scroll           相对于整个文档窗口滚动指定X和Y偏离量
setInterval    在指定毫秒数后重复求值一个表达式
setTimeout    在指定毫秒数后求值一个表达式
showHelp      显示指定URL的帮助文件
showModalDialog 将HTML文档作为模态对话框打开
事件              发生时
onBeforeunload    页面删除之前。这个事件可以让用户不离开页面。可以用脚本编一个事件处理器,显示一个对话框,让用户选择不离开页面
onBlur            对象失去焦点时
onError           装入文档或图形发生错误时
onFocus           对象取得焦点时
onHelp            用户按F1键或单击浏览器Help按钮时
onLoad            浏览器打开指定对象之后
onResize          窗口调整尺寸时
onScroll          滚动框移动时
onUnload          页面关闭时

window对象表示整个浏览器窗口,但不必表示其中包含的内容。Window还可用于移动或调整它表示的浏览器的大小。
      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。

      窗口操作
      moveBy(dx,dy)——把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素。Dx值为负数,向左移动窗口,dy值为负数,向上移动窗口。
      moveTo(x,y)——移动浏览器窗口,使它的左上角位于用户屏幕的(x,y)处,可以使用负数,不过样会把部分窗口移出屏幕的可视区域。
      resizeBy(dw,dh)——相对于浏览器窗口的当前大小,把窗口的宽度调整dw个像素,高度调整dy个像素。Dw为负数,缩小窗口的宽度,dy为负数,缩小窗口的高度。
      resizeTo(w,h)——把窗口的宽度调整为w,高度调整为h,不能使用负数。
      导航和打开新窗口
      用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

 

       var  oNewWin=window.open(“http://baidu.com”,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属性。
系统对话框
       alert()方法:只接受一个参数,即要显示给用户的文本,浏览器创建一个具有OK按钮的系统消息框,显示指定的文本。
       confirm()方法:只接受一个参数,即要显示的文本,浏览器创建一个具有OK按钮和Cancel按钮的系统消息框,显示指定的文本。该方法返回一个Boolean值,如果点击是OK按钮,返回true,点击的是Cancel按钮,返回false。
prompt()方法:提示用户输入某些信息,接受两个参数,即要显示给用户的文本和文本框中的默认文本。如果点击OK按钮,将文本框中的值作为函数值返回。如果点击Cancel按钮,返回null。
       以上三种对话框是模态的,意思是如果用户未点击OK按钮或Cancel按钮关闭对话框,就不能在浏览器窗口中做任何作品。
状态栏
       window.status属性设置状态栏要显示的内容。
       window.defaultStatus属性设置状态栏默认显示内容。
定时器
       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);
     在执行一组指定的代码前等待一段时间使用暂停。如果要反复执行某些代码,使用时间间隔。
历史对象
     浏览器窗口的历史,就是用户访问过的站点的列表。访问其可以使用window对象的history属性及它的相关方法。
      go()方法:只有一个参数,即前进或后退的页面数,如果是负数,就在浏览器历史中后退,如果是正数,就前进。可以使用length属性查看历史中的页面数。
      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”>定义的

 

      document对象也有许多集合,提供对载入的页面的各个部分的访问:

 

集合 说明
anchors 页面中的所有锚的集合 
applets 页面中所有applet的集合
embeds 页面中所有嵌入式对象的集合 
forms  页面中所有表单的集合
images  页面中所有图像的集合
links  页面中所有链接的集合

 

      可以用数字或名字引用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对象的一些通用属性:

 

属性 说明
hash  如果URL包含#,该方法将返回该符号之后的内容 
host 服务器的名字(如www.yiiyaa.net 
hostname  通常等于host,有时会省略前面的www
href  当前载入的页面的完整URL 
pathname  URL中的主机名后面的部分
port  URL中声明的请求的端口
protocol  URL中使用的协议,即双斜杠之前的部分
search  执行GET请求的URL中的问号后面的部分(查询字符串) 

 

       location.assign("http://baidu.com");     //设置窗口的URL,同location.href属性一样
       location.replace("http://baidu.com");    //同assign()方法一样,只不过从浏览器历史中删除包含脚本的页面,这样就不能通过浏览器的后退和前进按钮访问它。
      reload()方法:重新载入当前页面,只有一个参数,如果是false,则从缓存中载入,如果是true,则从服务器载。最后放在最后一行,因为有可能被执行,有可能不被执行,这由网络延迟和系统资源决定。
      toString()方法:返回location.href的值。
navigator对象
      navigator也是window对象的属性,可以用window.navigator引用它,也可以用navigator引用。
screen对象
       screen对象可以获取某些关于屏幕的信息。
       availHeight——窗口可以使用的屏幕的高度(以像素计),基路包括操作系统需要的空间
       availWidth——窗口可以使用的屏幕的宽度(以像素计)。
       colorDepth——用户表示颜色的位数,大多系统采用32位。
       height——屏幕的高度,以像素计。
       width——屏幕的高度,以像素计。

posted @ 2012-06-22 13:48  花儿笑弯了腰  阅读(412)  评论(0编辑  收藏  举报