浏览器对象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浏览器
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 浏览器 对象 BOM
链接地址:https://www.31doc.com/p-2605969.html