第6章浏览器对象.ppt

第6章 浏览器对象 教学目标 本章主要介绍常用的浏览器对象，通过本章的学习，使学生掌握浏览器对象的层次关系、熟悉窗口window对象、文档document对象和表单form对象。 教学要求 学习重点 浏览器对象的层次关系 window对象的常用属性和方法 document对象的常用属性和方法 form对象的常用属性和方法 本章目录 6.1 ?【案例21】打开和关闭窗口 6.2 ?【案例22】打开狭长窗口 6.3 【案例23】在页面中自定义背景色 6.4 【案例24】大小写字母变换 6.5 综合实训 6.1 ?【案例21】案例效果 设计一个有3个超链接的页面，单击这些链接可以打开、关闭新窗口以及关闭本窗口。效果图如图6.1所示。 代码设计 主要代码如下： script function openwin( ){ mywin=window.open(about:blank,,width=300,height=300,resizable=no); } /script body pre a href=JavaScript:openwin( );打开新窗口/a a href=JavaScript:mywin.close( );关闭新窗口/a a href=JavaScript:window.close( );关闭本窗口/a /pre /body 相关知识 浏览器对象的层次关系 相关知识 window对象概述 window对象代表的是打开浏览器窗口。通过window对象可以控制窗口的大小和位置，弹出对话框的类型、打开窗口与关闭窗口，还可以控制窗口上是否显示地址栏、工具栏和状态栏等栏目，对于窗口中的内容，window对象可以控制是否重载网页、是否返回上一个文档或前进到下一个文档。 相关知识 打开window对象的open( )方法的语法格式 windowVar=window.open(url,windowname[,windowfeature]); url：指向一个目标窗口的url，也就是在某个浏览器窗口中创建这个新的窗口。 windowname：是创建窗口对象的名字，赋予窗口对象一个名字是为了以后通过调用该名字来访问该窗口对象。 windowfeature：是一个用逗号分隔的字符串，列举了窗口的特征，见表6-1。 相关知识 相关知识 window.close( )关闭指定的浏览器窗口。 如果不带窗口引用调用close( )函数，JavaScript就关闭当前窗口。在事件处理程序中，必须指定window.close( )，而不能仅仅使用close( )，因为不带对象名字的close( )调用等价于document.close( )。 6.2 ?【案例22】案例效果 在装载“案例22.htm”页面的同时，自动打开宽和高均为200像素的新窗口“popu1.htm”，此窗口于5秒后自动关闭；单击“案例22.htm”中的超链接文字“使用超链接打开狭长窗口”能够打开高为100像素的狭长的窗口，打开的位置精确地控制在屏幕的左上角。效果图如图6.3所示。 代码设计 (1) 新建网页“案例22.htm”，编写如下源代码： html head title打开和关闭窗口/title script function openMywin(theURL,winName,features){ window.open(theURL,winName,features); } /script /head body background=images/main_bg.gif onload=openMywin (popup1.htm, myname, width=200,height=200) a href=# onclick= openMywin(popup2.htm,, width= +screen.availWidth+ ,height=100, top=+screen.availTop+,left=+screen.availLeft)使用超链接打开狭长窗口/a /body /html 代码设计 （2）修改网页“popu1.htm”，在head/head间添加以下源代码： script function closeit( ){ setTimeout(window.close( ),5000) } /script 代码设计 (3) 在网页“popu1.htm”的body标签中添加代码onload =“closeit( )”，即修改后的源代码如下所示： body background=images/main_bg.gif leftmargin=0 topmargin=0 marginwidth= 0 marginheigh