浏览器对象BOM.ppt

《浏览器对象BOM.ppt》由会员分享，可在线阅读，更多相关《浏览器对象BOM.ppt（60页珍藏版）》请在三一文库上搜索。

1、浏览器对象模型（BOM）,BOM功能简介,从IE3和Netscape Navigator 3开始，浏览器都提供一种被称为BOM（Brower Object Model）的特性，它可以对浏览器窗口进行访问和操作。,BOM功能简介,利用BOM的相关技术，web开发者可以移动窗口、改变状态栏以及执行一些与页面中内容毫不相关的操作，例如： 弹出新的浏览窗口； 移动、关闭浏览窗口以及调整窗口大小； 提供web浏览器相关信息的导航对象； 提供页面详细信息的定位对象； 提供屏幕分辨率详细参数的屏幕对象； 支持cookie； 各种浏览器自身的一些特性，例如IE的ActiveX类等。,BOM对象类别简介,浏览器

2、BOM对象，主要有： 窗口对象window； 浏览器信息对象navigator ； 屏幕对象screen； 网址对象location； 历史记录对象history； 文档对象document； 窗体对象form； 锚点对象anchor； 链接对象link； 图像对象image；,4,浏览器对象模型,5,浏览器对象简介,6,http:/,Window 窗口对象,location 地址对象,document 文档对象,FORM 表单对象,浏览器对象的分层结构,window.document.myform.text1,window对象,window对象表示浏览器中打开的窗口 。 如果文档包含框架（f

3、rame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。 在客户端 JavaScript 中，window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。,7,window对象对应着Web浏览器的窗口，使用它可以直接对浏览器窗口进行操作。window对象提供的主要功能可以分为以下5类： （1）调整窗口的大小和位置； （2）打开新窗口； （3）系统提

4、示框； （4）状态栏控制； （5）定时操作。,Window 对象的常用属性,9,window对象的方法,10,window对象的常用方法举例,window.moveBy(20,15)：浏览器窗口相对于当前位置水平向右移动20px，垂直向下移动15px。 window.moveTo(100,100)：将窗口移动到用户屏幕的水平方向100px，垂直方向100px处。 window.resizeTo(240,360)：把窗口的宽度调整为240px，高度调整为360px。 window.resizeBy(-50,0)：相对于浏览器窗口的当前大小，把宽度减少50px，高度不变。,案例：打开新窗口-1,1

5、2,open（”打开窗口的url”，”窗口名”，”窗口特征”） 窗口的特征如下，可以任意组合： height： 窗口高度； width： 窗口宽度； top： 窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值； toolbar： 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable： 是否允许改变窗口大小，yes或1为允许 location： 是否显示地址栏，yes或1为允许 status：是否显示状态栏内的信息，yes或1为允许；,我们需要预先制作好广告页面，假设为adv.htm，打开广告窗口的语句如下 ： open(“

6、adv.htm”, “”, “toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=650, height=150”);,案例：打开新窗口-2,13, function openwindow( ) open(“adv.htm“, “, “toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=650, height=150“); 看看和我一起打开的广告窗口 ,使用 Open

7、方法 打开广告新窗口,添加页面加载事件,close()方法,语法：close() （直接使用）参数：无,window.close(),self.close(),close(),如果是关闭主浏览器窗口 可以使用top.close(),如果： messageWin=window.open(“XXX.html“),其中messageWin为window.open函数返回的ID 那么关闭消息窗口，可以使用： messageWin.close(),alert()方法, ,alert()方法显示一个带有“确定”按钮的警告框 语法：alert(“message“), function confirmTest

8、() alert(confirm(“真的吗?“); ,confirm()方法,这里我们用alert()方法查看confirm()方法的返回值,显示一个带有 “确定”和“取消”按钮的消息确认对话框。 语法：confirm(“message“)。 点 “确定”之后会返回true，点 “取消”之后会返回false。, function promptTest() alert(prompt(“真的吗?“); ,prompt()方法,这里我们用alert()方法查看confirm()方法的返回值,显示一个带有 “确定”和“取消”按钮的内容输入对话框。 语法：prompt(“message”，“defaul

9、t”)。 点 “确定”之后会返回输入的字符串，点 “取消”之后会返回null。,定时器,setTimeout()：定时器,clearTimeout()：终止定时器,setInterval()：设置定时器,clearInterval()：取消使用setInterval()设置的定时器,定时器是用以指定在一段特定的时间后执行某段程序 实现定时器主要依靠window对象的四个方法,定时器的综合应用,上面的例子将实现动态的状态栏，在状态栏上依次打印出文字,练习：控制窗口的打开与关闭。,Window 对象的常用属性（续）,21,更多属性参看：http:/ self对象实际上代表的是窗口自身，是用于对窗口

10、对象自身的一些属性进行控制。,主窗口main.html queryWin=open(sub.html,height=100 width=150) ,在主窗口用open方法打开文件sub.html作为子窗口，其中高度为100，宽度用默认值,对象示例, function passToOpener(color) opener.document.bgColor=color; self.close(); 请选择你喜欢的颜色? 蓝色 红色 ,子窗口sub.html,改变父窗口的颜色,关闭子窗口,调用改变父窗口颜色的函数,图例,A,B,Open方法打开,A是B的opener,框架对象 Frame,一个框架内

11、的网页也是 window 对象，也就是说，Frame 对象也是 window 对象。用最容易理解的话说，每一个 HTML 文件占用一个 window 对象，包括定义框架的网页（“框架网页”）。在 IE 里用“”标记在文档中插入的框架也是 window 对象 。,引用窗口中的一个框架,window.framesx window.framesframeName window.frameName 其中，x 指的是该 window 对象中指定的第几个框架，与其它数组一样，x 也是从零开始的。frameName 指的是该框架的名字，跟里的“name”属性一样。 如果使用 window.frameName

12、 指定的 window 对象又是一个框架网页，那么引用它的框架的方法：window.frameName.subFrameName。以此类推。,parent对象,parent对象仅仅是对子窗口有意义 parent窗口不一定是顶层窗口，是一个相对的概念,子,父,top对象,对于base窗口来说，他的top对象是A窗口 可以通过top.length来得到顶层窗口中含有的框架个数,Base窗口,A 窗 口,navigator对象,navigator对象代表浏览器的总体信息，这些信息只能读取不能设置。 navigator对象有5个主要属性用于提供正在运行的浏览器的版本信息： appName：web浏览器

13、的简单名称； appVersion：浏览器的内部版本号和其他版本信息。 userAgent：包含浏览器的内码名称及版本号，用于识别用户。,29,状态栏,除了创建明确不使用状态栏的浏览器窗口，每个浏览器窗口的底部都有一个状态栏，用来向用户显示一些特定的消息。 通过改变window.status或window.defaultStatus的值来改变状态栏的默认行为，如： window.status=new Date(); 运行后可以在状态栏看到系统日期和时间。,navigator对象,appCodeName：浏览器的代码名。流行的 IE 和 NN 都返回 Mozilla。 platform：用户操作

14、系统。 举例：navigator对象的用法： for(var i in window.navigator) document.write(i+”=“+window.navigatori+”);,screen对象,32,该对象提供显示器的分辨率和可用颜色数信息； 主要属性如下： weidth,height:表示显示器的分辨率，即整个屏幕的尺寸，以px为单位； availWidth，availHeight：表示实际可用的显示空间大小，以px为单位； colorDepth：表示浏览器可以显示的颜色数的位数。- 1：黑白；8：256色；16：增强色；24/32：真彩色,举例：使用screen对象获得屏

15、幕属性。,33, document.write(“屏幕宽度是：“+window.screen.width+“); document.write(“屏幕高度是：“+window.screen.height+“); document.write(“屏幕色深是：“+window.screen.colorDepth+“); document.write(“屏幕可用宽度是：“+window.screen.availWidth+“); /可用高度是除去任务栏以后的高度 document.write(“屏幕可用高度是：“+window.screen.availHeight+“); ,举例：检测屏幕分辨率,

16、var s=800;/确定最佳显示效果 if(screen.width!=s) document.write(“您的屏幕分辨率是“+screen.width+“ ,location位置对象,Location 位置对象的 属性说明,location位置对象：用来代表特定窗口的URL信息。 URL的格式：protocol/host:port/path#hash?search URL的种类主要有：http、file、ftp、mailto、news,location位置对象的方法,按下一个按钮后前往网易网站，那么使用下面的代码,history历史对象,用于存储客户端最近访问过的网址清单,history

17、历史对象的属性,history 历史对象的方法,Back ( ) 方法相当于后退按钮 forward ( ) 方法相当于前进按钮 go (1)代表前进1页，等价于forward( )方法； go(-1) 代表后退1页，等价于back( )方法；,BOM对象常用文档对象,文档对象document； 窗体对象form； 锚点对象anchor； 链接对象link； 图像对象image；,38,文档对象document概述,document对象代表一个浏览器窗口或框架中显示的HTML文件。 浏览器在加载HTML文档时，为每一个HTML文档创建相应的document对象。 document对象是wind

18、ow对象的一个属性，引用它时，可以省略window前缀。 document拥有大量的属性和方法，结合了大量子对象，如图像对象、超链接对象、表单对象等。这些子对象可以控制HTML文档中的对应元素，使我们可以从脚本中对 HTML 页面中的所有元素进行访问,document 对象的主要属性,案例：主要属性的应用。,document 对象的方法,举例：初识document对象的应用,document.title=“new title”;/修改文档标题 document.open();/开启文档 document.write(“some words”);/写入数据 document.writeln(“s

19、ome words”);/写入数据 document.close();/关闭文档,举例：document对象的使用, 输入你的姓名: Greeting Nice to see you!some notes for you:here is some message.Good bye!“); close(); ,举例：运行结果,练习：修改文档的标题,新建一空白网页； 在页面上插入文本输入框及按钮； 浏览网页，在文本框输入文本； 单击按钮，将文本框内输入的内容作为新的网页标题。,document 对象的集合,Form表单对象简介,一个页面文档中存在的一个表单对应一个Form对象，多个表单对应多个Fo

20、rm对象； Form对象最有用的属性是elements集合，它包含各种表单输入元素的JavaScript对象；,Form对象的常用属性,Form对象的常用方法及事件,方法：,事件：,举例：Form和elements的引用, 姓名： 密码： ,举例：页面浏览效果,点击“提交”按钮后的页面,forms 集合,如果你在文档里容纳了三个命名forms，它们的属性名分别为 form1，form2和form3，那么可以使用下面的代码分别查询 它们,document.forms“form1“ document.forms“form2“ document.forms“form3“,document.forms

21、0 document.forms1 document.forms2,或,如果想查询第二个form中一个名字为quantity的text对象的值 那么你可以使用document.forms1.quantity.value,锚点对象anchor和链接对象link,每设置一个有name属性的标签，就建立了一个锚点对象；每设置一个标签或标签，就建立了一个link对象。 anchor 对象通常以数组的形式表示网页中的所有锚点； links 集合可返回对文档中所有 Area 和 Link 对象的引用。 anchor数组以锚点在文档中出现的顺序存储锚点； anchor数组的下标从0开始，通过指定下标可以访问

22、和查找某个锚点，或者使用 document.getElementById()。,anchors 集合,如果你在文档里容纳了三个命名anchor，它们的名字分别 为anchor1，anchor2和 anchor3，那么可以使用下面的代 码分别查询它们：,document.anchors“anchor1“ document.anchors“anchor2“ document.anchors“anchor3“,document.anchors0 document.anchors1 document.anchors2,或,如果想要得到文档中anchors的数量，可以使用length属性 即调用：doc

23、ument.anchors.length。,links 集合,是一个对应于源文件中相应顺序的链接对象构成的数组 如果文档里有三个链接标签即三个 那么可以使用如下的方法查询它们：,document.links0 document.links1 document.links2,anchor对象和link对象的常用属性,name：设置或返回一个链接的名称。 id：设置或返回一个链接的id。 href：设置或返回被链接资源的URL。 target：设置或返回在何处打开链接，属性值如下： _blank： 在一个新的未命名的窗口载入文档 _self ：在相同的框架或窗口中载入目标文档 _parent ：

24、把文档载入父窗口或包含了超链接引用的框架的框架集 _top：把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架,案例：anchor对象和link对象的访问。,浏览结果,图像对象image,每设置一个标签，就建立了一个图像对象。 image 对象通常以数组的形式表示网页中的所有图像。 images数组以图像在文档中出现的顺序存储图像。 images数组的下标从0开始，通过指定下标可以访问和查找某个图像，或者使用 标签的name属性代替下标进行访问。,例：计算文档中的图像数目, document.write(“本文档包含：“ + document.images.length + “ 幅图像。“) ,