BOM对象-阿里云开发者社区

开发者社区> 开发与运维> 正文

BOM对象

简介:     BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。 BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
 
 
BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。[1]
 
 

bom.浏览器对象

window对象,所有对象的顶层对象。操作该对象是对窗口进行设置

    window对象表示整个浏览器窗口,但不必表示其中包含的内容.此外,window还可用于移动或调整它表示的浏览器的大小,或者对它产生其他影响.

注:如果页面使用框架集合,每个框架都由它自己的window对象表示,存放在frames集合中.在frames集合中,可用数字(由0开始,从上到下,从左到右,逐行的)或名字对框架进行索引.

如:

<frameset rows = “100,*”>

           <frame src=“frame.htm” name = “topFrame” />

           <frameset cols = “40%,60%”>

               <frame src=“anotherframe.htm” name = “leftFrame”/>

               <frame src=“yetanotherframe.htm” name = “rightFrame” />

           </frameset>

    </frameset>

                               [frameset1.htm]

获取框架对象

parent.frames[0].name 所属框架上级的第一个

如 <frameset rows="100,*"> <frame src="frame.html" name="topFrame"> 

在frame.html网页中,"alert(parent.frames[0].name),就是弹出topFrame

在frame.html网页中,"alert(parent.frames[1].name),就是弹出leftFrame

        <frameset cols="50%,50%">

             <frame src="anotherframe.html" name="leftFrame"/>

               <frame src="yetanotherframe.html" name = "rightFrame"/>

        </frameset>

 </frameset>

=========================================================

   <frameset cols="100,*">

         <frame src="red.html" name="redFrame"/>

在red.html里面点击alert(parent.frames[0].name),弹出redFrame

         <frame src="blue.html" nam="blueFrame"/>

   </frameset>

 

窗口操作

p      moveBy(dx,dy) –把浏览器窗口水平移动dx个像素,竖直移动dy个像素.

p      moveTo(x,y) –移动浏览器窗口,使它的左上角位于用户屏幕的(x,y)处.

p      resizeBy(dw,dh) –相对于浏览器窗口的当前大小,把窗口的宽度调整dw个像素,把窗口的高度调整为dy个像素.

p      resizeTo(w,h) –把窗口的宽度调整为w,高度调整为h,不能使用负数

p      screenLeft、screenTop: IE中用于得到窗口的位置。

注:指的是内容区域相对于桌面屏幕最右上角(0,0)点的坐标

     IE未提供任何判断窗口大小的方法。用document.body.offsetWidth和document.body.offsetHeight属性可以获取视口(dom区域)的大小(显示html页的区域),但它们不是标准属性.

}         Mozilla提供window.screenX,window.screenY属性判断窗口的位置,它还提供了window.innerWidth和window.innerHeight属性来判断视口的大小,window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小.

}         导航和打开新窗口

    oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace bReplace])

window.open方法打开新窗口

sURL—要载入的页面的URL

sName—新窗口的名字 (也可是框架页的名字如:topFrame)如果名字是框架名,那么这个网页会在这个框架里面打开

bReplace—是否用新载入的页面替换当前载入的页面的Boolean值.

 

sFeatures—特性字符串

}         sFeatures

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

fullscreen=yes   全屏

window.open()方法将返回window对象作为它的函数值,该window对象就是新创建的窗口(如果给定的名字是已有的框架名,则为框架).用这个对象,可以操作新创建的窗口.

如:

}         var oNewWin = window.open(“Noname2.html”,“null”,“height=200,width=200,top=0,left=0,toolbar=no,status=no,resizable=no,scrollable=no");

}         oNewWin.moveTo(0,0);

}         oNewWIn.resizeTo(400,400);

 

状态栏

 

一般说来,状态栏告诉了用户何时在载入页,何时完成载入页面.可以用window的两个属性设置它的值.

即status和defaultStatus属性

status:可以使状态栏的文本暂时改变,面defaultStatus则可在用户离开当前页面前一直改变该文本.

eg:window.defaultStatus=“欢迎光临本网站”;

<a href=“book.htm” onmousemove=“window.status=‘欢迎订览’”>Books</a>

}         时间间隔与暂停

可以用window对象的setTimeout()方法设置暂停.

该方法两个参数,第一个参数可以是代码串或函数名,

第二个参数是在执行它之前要等待的毫秒数.

eg:

1、setTimeout(“alert(‘ok’)”,1000);

2、setTimeout(function(){alert(“ok”);},1000);

3、function test()

{

    alert(“ok”);

}

setTimeout(test,1000); 只执行一次

setInterval无限次地每隔指定的时间段就重复一次指定的代码.

时间间 隔与暂停(setTimeout)的方式类似,只是它无限次地每隔指定的时间段就重复一次指定的代码.也可利用clearInterval(ID)来清除时间间隔

====================

调用setTimeout()时,它创建一个数字暂停ID,与操作系统中的进程ID相似,暂停ID本质上是要延迟的进程的ID。在调用setTimeout()后,就不应该再执行它的代码.要取消还未执行的暂停,可调用clearTimeout()方法,并将暂停的ID传递给它

 

var iTimeoutID = setTimeout(“alert(‘OK’)”,1000);

clearTimeout(iTimeoutID);

}         历史(history)

    可以访问浏览器窗口的历史.所谓历史,是用户访问过的站点的列表.

1、go() 方法只有一个参数,即前进或后退的页面数.(如为负数,就为后退)

eg: window.history.go(1); window.history.go(-1);历史界面的前进和后退

2、back()和forward()一样可以实现上述的功能 相当于go(-1)和go(1)

3、length可以用于查看历史中的页面数 判断有没有历史界面

 

 

 

 

 

 

}         document对象

    document对象实际上是window对象的属性

    这个对象的独特之处是它是唯一一个即属于BOM又属于DOM的对象.

    从BOM的角度看,document对象是由一系列集合构成。这些集合可以访问文档的各个部分,并提供页面自身的信息。每个浏览器实现的document对象都稍有不同.

    下面列出一些常用的属性.

}         document对象包含的集合

1、anchors : 页面中所有锚的集合<a name=“anchorsname”></a>

2、applets: 页面中所有applet的集合

3、embeds: 页面中所有嵌入式对象的集合(由<embed/>标签表示)

4、forms: 页面中所有表单的集合

5、images:页面中所有图像的集合

6、links: 页面中所有链结的集合(由<a href=“xxx.htm”>xxx</a>表示)

7、alinkColor: 激活链接的颜色.eg:<body alink=“red”>

8、bgColor: 页面的背景颜色.eg:<body bgcolor=“blue”>

9、lastModified:最后修改页面的日期,是字符串

10、linkColor: 链结的颜色. eg:<body link=‘blue’>

11、referrer: 浏览器历史中后退一个位置的URL

12、title: <title/>标签中显示的文本

13、URL:当前载入页面的URL

14、vlinkColor:访问过的链结的颜色.eg:<body vlink=“blue”>

注意:访问文档的各个部分的方法可如下:

1、用document.links[0]访问链接

2、用document.images[0]或document.images[“imgname”]访问图像

3、用document.forms[0]或document.forms[“frmname”]来访问表单

注意:访问文档的各个部分的方法可如下:

1、用document.links[0]访问链接

2、用document.images[0]或document.images[“imgname”]访问图像

3、用document.forms[0]或document.forms[“frmname”]来访问表单

}         document.write()和document.writeln();

写入文档内容

eg:通过以下方式动态引入外部的JS

}         <SCRIPT LANGUAGE="JavaScript">

}         <!--

}             var str="<script type=\"text/javascript\" src=\"my.js\"></scr"+"ipt>";

}         最后的script需要分开写

}          document.write(str);

}         //-->

}         </SCRIPT>

注意:要插入内容属性,必须在完全载入页面前调用write()和writeln()方法,如果任何一个方法是在页面载入后调用的,它将抹去页面的内容,显示指定的内容.

 

 

open()与close()方法

与write和writeln方法紧密相关的是open()和close()方法.

open()方法用于打开已经载入的文档以便进行编写.

close()方法用于关闭open()方法打开的文档,本质是告诉它显示写入其中的所有内容.

eg:

var oNewWin=window.open("about:blank","newwindow","height=150,width=400,top=10,left=20,resiable=yes");

oNewWin.document.open();

oNewWin.document.write("<html><head><title>new Window</title></head>");

oNewWin.document.write("<body>This is a new Window!</body></html>");

oNewWin.document.close();

}         location对象,对地址进行解析

Location对象表示载入窗口的URL,此外,它还可以解析URL:

       hash—如果URL包含#,该方法将返回该符号之后的内容(eg:http://www.somewhere.com/index#selection1的hash等于”#selection1”)

       host – 服务器的名字(eg:www.yahoo.com.cn)

       hostname – 通常等于host,有时会省略前面的www

       href – 当前载入的页面的完整的URL

       pathname –URL中主机名后的部分.eg:http://www.yahoo.com.cn/pictures/index.htm的pathname是”/pictures/index.htm”

       port – URL中声明的请求的端口,默认情况下,大多数URL没有端口信息,所以该属性通常是空白的.如:http://www.somewhere:8081/index.htm的port返回的是8081

       protocol –URL中使用的协议 eg:http://www.google.cn

   返回的是http:,ftp://www.wrox.com返回的是ftp:

       search – 执行GET请求的URL中的问号(?)后的部分.

   eg: http://www.google.cn/index.aspx?term=javascript

    中的search属性是?term=javascript;

}         location.href

}         location.assign

eg: 向另外页面导航

location.href=“http://www.wrox.com”;

location.assign(“http://www.wrox.com”);

要从服务器重载当前页面 :location.reload(true)//刷新,从服务器加载页面

要从缓存中重载当前页面: location.reload(false)(从缓存加载页面) 或location.reload()

navigator对象,用于提供web服务器的信息

navigator对象用于提供Web浏览器信息

1、appName: 官方浏览器的字符串表示

2、appVersion: 浏览器版本信息的字符串表示

3、language:浏览器语言的字符串表示

4、platform:运行浏览器的计算机平台的字符串表示

5、systemLanguage:操作系统语言的字符中表示

6、userLanguage:操作系统语言的字符串表示

7、vendor:品牌浏览器名的字符串表示

说明:在判断浏览器页面采用的是哪种浏览器方面时,navigator非常有用

screen对象可以用screen对象获取某些关于用户屏幕

screen对象通常包含下列属性.

       availHeight : 窗口可以使用的屏幕的高度(以像素计),其中包括操作系统元素(如windows工具栏)需要的空间

       availWidth: 窗口可以使用的屏幕的宽度(以像素计)

       colorDepth: 用户表示颜色的位数,大多数采取32位计.

       height : 屏幕的高度

       width : 屏幕的宽度

eg:可用以下代码填充用户的屏幕

window.moveTo(0,0);

window.resizeTo(screen.availWidth,screen.availHeight);

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章