《JS常用窗口对象》PPT课件.ppt

JS常用窗口对象,制作：潘院明,window描述了一个浏览器窗口，是客户端javascript最高层对象之一，只要打开浏览器窗口，window对象都会存在（全局对象）,常用属性,JavaScript的内置对象,Window对象常用的属性,常用的属性,window常用方法,JavaScript的内置对象,常用的方法onLoad事件：在窗口或框架完成文档加载时触发,window对象常用的方法和事件,JavaScript的内置对象,windwo.open打开一个新窗口,document包含与文档元素一起工作的对象，将这些元素封装起来,常用属性,JavaScript的内置对象,document常用方法,JavaScript的内置对象,document,JavaScript的内置对象,屏幕对象（screen）,屏幕对象（screen）是JS中的屏幕对象，反映了当前用户的屏幕设置。width:屏幕宽度window.screen.widthheight:屏幕高度pixelDepth:显示器的每个像素的位数colorDepth:屏幕色深当前颜色设置所用的位数：1代表黑白；8代表256色；16代表增强色（大概支持64000种颜色）；24/32代表真彩色（大概支持1600万种颜色）availHeight:屏幕可用高度（除去任务栏的高度）availWidth:屏幕可用宽度,如何使用window对象-1,functionopenwindow()window.status=系统当前状态：您正在注册用户.;if(window.screen.width=1024,示例完整代码,在窗口状态栏中设置文本,设置窗口的高度,使用open方法打开新窗口,弹出警告对话框,弹出确认对话框,关闭当前窗口,添加单击事件,因为window是最顶层的根，所以可以省略window.open(google.htm);可简写为：open(google.htm);close()方法也是如此。,如何使用window对象-2-1,新建窗口：open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：height：窗口高度；width：窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar，scrollbars表示菜单栏和滚动栏。resizable：是否允许改变窗口大小，yes或1为允许location：是否显示地址栏，yes或1为允许status：是否显示状态栏内的信息，yes或1为允许；,我们需要预先制作好注册页面，假设为register.html，打开注册窗口的语句如下open(register.html,注册窗口,toolbar=0,location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1);,通过open方法打开注册页面之后的效果,如何使用window对象-2-2,functionopenwindow()window.status=系统当前状态：您正在注册用户.;if(window.screen.width=1024,示例完整代码,使用Open方法打开注册新窗口,添加单击事件,如何使用window对象-3,functionopenwindow()window.status=系统当前状态：您正在注册用户.;if(window.screen.width=1024用户注册退出,示例完整代码,使用超链接调用方法来打开注册新窗口,如何使用window对象-4,functionopenwindow()open(adv.htm,广告窗口,toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=700,height=250);,示例完整代码,窗口完成文档加载时触发打开广告窗口,如何使用window对象-5,functionopenwindow()window.status=系统当前状态：您正在注册用户.;if(window.screen.width=1024H3用户注册退出,示例完整代码,打开模式窗口，被打开窗口保持输入焦点。,使用超链接调用方法来打开模式窗口,窗口的尺寸及位置,window.moveTo(x,y)：将窗口移动至指定坐标(x,y)处window.resizeTo(x,y)：改变窗口大小成(宽,高)window.resizeBy(x,y)：放大/缩小窗口（x水平宽度，y垂直高度；x/y值大于0为放大，小于0为缩小）,varwin=window.open(“test.html”,“”,“scrollbars=no”);/打开新窗口win.moveTo(0,0);/移动窗口位置win.resizeTo(200,200);/改变窗口大小win.resizeBy(100,100);/放大窗口,其它操作,状态栏文字设置window.status=“要显示的字符串信息”;关闭窗口window.close();,小结1,编写如左图所示，具有自动打开广告窗口和在浏览器状态栏中显示“欢迎你.”信息的页面。,广告窗口,状态栏信息,练习答案,练习代码,history包含一组用户在窗口中浏览过的URL信息,常用方法,JavaScript的内置对象,history和location对象-1,history对象方法,back()方法相当于后退按钮forward()方法相当于前进按钮go(1)代表前进1页，等价于forward()方法；go(-1)代表后退1页，等价于back()方法；,location含有当前URL的信息，可通过其属性获得这些信息,常用属性,JavaScript的内置对象,JavaScript的内置对象,location常用方法：,history和location对象-2,Location对象属性方法,history和location对象-3,返回前进刷新首页跳转到其他版块新闻贴图网上谈兵IT茶馆教育大家谈,查看完整代码,添加选项改变事件,获取被选中的下拉菜单项value的值,网址对象的应用：Window.location.href=“index.html”,浏览器信息（navigator）对象,navigator.appName：浏览器名称navigator.appVersion：浏览器版本navigator.appCodeName：浏览器内码名称navigator.platform：用户操作系统不同的浏览器其浏览器信息对象所提供的信息内容各不相同，因此不能完全依靠浏览信息对象来识别用户所使用的浏览器,常见错误,如何设置下拉菜单中的默认选中的第一项？,如何使页面