现在的位置: 首页 > 综合 > 正文

JavaScript之BOM(浏览器对象模型)

2018年05月24日 ⁄ 综合 ⁄ 共 4877字 ⁄ 字号 评论关闭

 BOM(浏览器对象模型),它提供了独立于内容而与浏览器窗口进行交互的对象。BOM由一系列相关的对象构成。
一、window对象
      window对象表示整个浏览器窗口,但不必表示其中包含的内容。Window还可用于移动或调整它表示的浏览器的大小。
      (1)、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。

      (2)、窗口操作
      moveBy(dx,dy)——把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素。Dx值为负数,向左移动窗口,dy值为负数,向上移动窗口。
      moveTo(x,y)——移动浏览器窗口,使它的左上角位于用户屏幕的(x,y)处,可以使用负数,不过样会把部分窗口移出屏幕的可视区域。
      resizeBy(dw,dh)——相对于浏览器窗口的当前大小,把窗口的宽度调整dw个像素,高度调整dy个像素。Dw为负数,缩小窗口的宽度,dy为负数,缩小窗口的高度。
      resizeTo(w,h)——把窗口的宽度调整为w,高度调整为h,不能使用负数。
      (3)、导航和打开新窗口
      用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://www.yiiyaa.net”,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属性。
       (4)、系统对话框
       alert()方法:只接受一个参数,即要显示给用户的文本,浏览器创建一个具有OK按钮的系统消息框,显示指定的文本。
       confirm()方法:只接受一个参数,即要显示的文本,浏览器创建一个具有OK按钮和Cancel按钮的系统消息框,显示指定的文本。该方法返回一个Boolean值,如果点击是OK按钮,返回true,点击的是Cancel按钮,返回false。
prompt()方法:提示用户输入某些信息,接受两个参数,即要显示给用户的文本和文本框中的默认文本。如果点击OK按钮,将文本框中的值作为函数值返回。如果点击Cancel按钮,返回null。
       以上三种对话框是模态的,意思是如果用户未点击OK按钮或Cancel按钮关闭对话框,就不能在浏览器窗口中做任何作品。
       (5)、状态栏
       window.status属性设置状态栏要显示的内容。
       window.defaultStatus属性设置状态栏默认显示内容。
       (6)、时间间隔和暂停
       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);
     在执行一组指定的代码前等待一段时间使用暂停。如果要反复执行某些代码,使用时间间隔。
     (7)、历史
     浏览器窗口的历史,就是用户访问过的站点的列表。访问其可以使用window对象的history属性及它的相关方法。
      go()方法:只有一个参数,即前进或后退的页面数,如果是负数,就在浏览器历史中后退,如果是正数,就前进。可以使用length属性查看历史中的页面数。
二、document对象
      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://www.yiiyaa.net”);     //设置窗口的URL,同location.href属性一样
       location.replace(“http://www.yiiyaa.net”);    //同assign()方法一样,只不过从浏览器历史中删除包含脚本的页面,这样就不能通过浏览器的后退和前进按钮访问它。
      reload()方法:重新载入当前页面,只有一个参数,如果是false,则从缓存中载入,如果是true,则从服务器载。最后放在最后一行,因为有可能被执行,有可能不被执行,这由网络延迟和系统资源决定。
      toString()方法:返回location.href的值。
四、navigator对象
      navigator也是window对象的属性,可以用window.navigator引用它,也可以用navigator引用。
五、screen对象
       screen对象可以获取某些关于屏幕的信息。
       availHeight——窗口可以使用的屏幕的高度(以像素计),基路包括操作系统需要的空间
       availWidth——窗口可以使用的屏幕的宽度(以像素计)。
       colorDepth——用户表示颜色的位数,大多系统采用32位。
       height——屏幕的高度,以像素计。
       width——屏幕的高度,以像素计。   

【上篇】
【下篇】

抱歉!评论已关闭.