《JS常用窗口对象.ppt》由会员分享，可在线阅读，更多相关《JS常用窗口对象.ppt（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 JS常用窗口对象制作：潘院明 window描述了一个浏览器窗口，是客户端描述了一个浏览器窗口，是客户端javascript最高层对象之一，最高层对象之一，只要打开浏览器窗口，只要打开浏览器窗口，window对象都会存在（全局对象）对象都会存在（全局对象）常用属性常用属性名称名称说明说明status设置或给出浏览器状态栏当前显示信息设置或给出浏览器状态栏当前显示信息location给出当前窗口的给出当前窗口的URL或指定在窗口打开页面的或指定在窗口打开页面的URLname读取或指定窗口名称读取或指定窗口名称document是对象，含当前文档信息，有自己的属性、方法是对象，含当前文档信息，有自己
2、的属性、方法history包含客户在窗口中浏览过的包含客户在窗口中浏览过的URL信息信息JavaScript的内置对象的内置对象 Window对象常用的属性名称 说明 status 指定浏览器状态栏中显示的临时消息 screen有关客户端的屏幕和显示性能的信息。history 有关客户访问过的URL的信息。location有关当前 URL 的信息。document表示浏览器窗口中的HTML文档常用的属性 window常用方法常用方法JavaScript的内置对象的内置对象名称名称说明说明open打开一个新的窗口，格式：打开一个新的窗口，格式：window.open(URL,窗口名称窗口名称,参
3、数设置参数设置)设置的参数可以有多个，中间用设置的参数可以有多个，中间用“，”分开分开close自动关闭浏览器窗口，自动关闭浏览器窗口，window.close()；alert弹出警告框，弹出警告框，window.alert(提示内容提示内容)；confirm显示确认框，显示确认框，window.confirm(提示内容提示内容)；prompt显示一个输入框，用户可以输入内容显示一个输入框，用户可以输入内容 常用的方法onLoad事件：在窗口或框架完成文档加载时触发window对象常用的方法和事件名称 说明 alert(提示信息)显示一个带有提示信息和确定按钮的对话框 confirm(提示信息
4、“)显示一个带有提示信息、确定和取消按钮的对话框 open(url,name)打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档close()关闭当前窗口showModalDialog()在一个模式窗口中显示指定的HTML文档setTimeout(函数,毫秒数)设置定时器：经过指定毫秒值后执行某个函数 JavaScript的内置对象的内置对象windwo.open 打开一个新窗口打开一个新窗口 document包含与文档元素一起工作的对象，将这些元素封装起来包含与文档元素一起工作的对象，将这些元素封装起来常用属性常用属性JavaScript的内
5、置对象的内置对象名称名称说明说明title设置文档标题，等价于设置文档标题，等价于HTML的的标签标签bgColor设置页面背景色设置页面背景色fgColor设置前景色，即文本显示颜色设置前景色，即文本显示颜色url设置设置url属性从而在同一窗口打开另一网页属性从而在同一窗口打开另一网页fileCreatedDate文件建立日期，只读属性文件建立日期，只读属性fileModifiedDate文件修改日期，只读属性文件修改日期，只读属性fileSize文件大小，只读属性文件大小，只读属性forms集合，通过这个属性引用页面中的不同表单集合，通过这个属性引用页面中的不同表单 document常用
6、方法常用方法JavaScript的内置对象的内置对象名称名称说明说明write将字符串输出到当前窗口，字符串内可将字符串输出到当前窗口，字符串内可以包含以包含HTML标签，如：标签，如：document.write(“英泰移动通信学院英泰移动通信学院”);writeln同同write类似，只是输出内容后自动换行类似，只是输出内容后自动换行 document JavaScript的内置对象的内置对象 屏幕对象（screen）屏幕对象（screen）是JS中的屏幕对象，反映了当前用户的屏幕设置。height:屏幕高度pixelDepth:显示器的每个像素的位数colorDepth:屏幕色深当前颜色
7、设置所用的位数：1代表黑白；8代表256色；16代表增强色（大概支持64000种颜色）；24/32代表真彩色（大概支持1600万种颜色）availHeight:屏幕可用高度（除去任务栏的高度）availWidth:屏幕可用宽度 如何使用window对象-1function openwindow()window.status=系统当前状态：您正在注册用户系统当前状态：您正在注册用户.;if(window.screen.width=1024&window.screen.height=768)window.open(register.html);else window.alert(请设置分辨率为请设
8、置分辨率为1024x768，然后再打开，然后再打开);function closewindow()if(window.confirm(您确认要退出系统吗？您确认要退出系统吗？)window.close();示例完整代码示例完整代码在窗口状态栏在窗口状态栏中设置文本中设置文本设置窗口设置窗口的高度的高度使用使用open方法方法打开新窗口打开新窗口弹出警告对话框弹出警告对话框弹出确认对话框弹出确认对话框关闭当关闭当前窗口前窗口添加单添加单击事件击事件因为因为window是最顶层的根，所以可以省略是最顶层的根，所以可以省略window.open(google.htm);可简写为：可简写为：open(
9、google.htm);close()方法也是如此。方法也是如此。如何使用window对象-2-1新建窗口新建窗口：open（”打开窗口的打开窗口的url”，”窗口名窗口名”，”窗口特征窗口特征”）窗口的特征如下，可以任意组合：窗口的特征如下，可以任意组合：height：窗口高度；窗口高度；width：窗口宽度；窗口宽度；top：窗口距离屏幕上方的象素值；窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，是否显示工具栏，yes为显示；为显示；menubar，scrollbars 表示菜单栏和滚动栏。表示菜单栏和滚动栏。re
10、sizable：是否允许改变窗口大小，是否允许改变窗口大小，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,scrollb
11、ars=1);通过通过open方法方法打开注册页面打开注册页面之后的效果之后的效果 如何使用window对象-2-2function openwindow()window.status=系统当前状态：您正在注册用户系统当前状态：您正在注册用户.;if(window.screen.width=1024&window.screen.height=768)open(register.html,注册窗口注册窗口,toolbars=0,location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1);else window.ale
12、rt(请设置分辨率为请设置分辨率为1024x768，然后再打开，然后再打开);function closewindow()if(window.confirm(您确认要退出系统吗？您确认要退出系统吗？)window.close();示例完整代码示例完整代码使用使用 Open 方法方法打开注册新窗口打开注册新窗口添加单添加单击事件击事件 如何使用window对象-3function openwindow()window.status=系统当前状态：您正在注册用户系统当前状态：您正在注册用户.;if(window.screen.width=1024&window.screen.height=768)
13、open(register.html,注册窗口注册窗口,toolbars=0,location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1);else window.alert(请设置分辨率为请设置分辨率为1024x768，然后再打开，然后再打开);function closewindow()if(window.confirm(您确认要退出系统吗？您确认要退出系统吗？)window.close();用户注册用户注册 退退 出出示例完整代码示例完整代码使用超链接调使用超链接调用方法来打开用方法来打开注册新窗口注册新窗口
14、如何使用window对象-4function openwindow()open(adv.htm,广告窗口广告窗口,toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=700,height=250); 示例完整代码示例完整代码窗口完成文档窗口完成文档加载时触发打加载时触发打开广告窗口开广告窗口 如何使用window对象-5function openwindow()window.status=系统当前状态：您正在注册用户系统当前状态：您正在注册用户.;if(window.screen.w
15、idth=1024&window.screen.height=768)window.showModalDialog(register.html,注册窗口注册窗口,toolbars=0,location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1);else window.alert(请设置分辨率为请设置分辨率为1024x768，然后再打开，然后再打开);function closewindow()if(window.confirm(您确认要退出系统吗？您确认要退出系统吗？)window.close();H3用户注册用户
16、注册 退退 出出示例完整代码示例完整代码打开模式窗口，打开模式窗口，被打开窗口保持被打开窗口保持输入焦点。输入焦点。使用超链接调使用超链接调用方法来打开用方法来打开模式窗口模式窗口 窗口的尺寸及位置window.moveTo(x,y)：将窗口移动至指定坐标(x,y)处window.resizeTo(x,y)：改变窗口大小成(宽,高)window.resizeBy(x,y)：放大/缩小窗口（x水平宽度，y垂直高度；x/y值大于0为放大，小于0为缩小）var win=window.open(“test.html”,“”,“scrollbars=no”);/打开新窗口win.moveTo(0,0);
17、/移动窗口位置win.resizeTo(200,200);/改变窗口大小win.resizeBy(100,100);/放大窗口 其它操作状态栏文字设置window.status=“要显示的字符串信息”;关闭窗口window.close();小结1编写如左图所示，具有自动打开广告窗口和在浏览器状态栏中显示“欢迎你.”信息的页面。广告广告窗口窗口状态栏状态栏信息信息练习答案练习答案练习代码练习代码 history包含一组用户在窗口中浏览过的包含一组用户在窗口中浏览过的 URL信息信息 常用方法常用方法JavaScript的内置对象的内置对象名称名称说明说明back相当于按浏览器的后退按钮相当于按浏
18、览器的后退按钮forward按浏览器的前进按钮按浏览器的前进按钮go常给出一个指定的值用来向前或向后移动，常给出一个指定的值用来向前或向后移动，如如history.go(-1)则向后移动一个则向后移动一个url history 和location对象-1history 对象方法 名称 说明 back()加载 History 列表中的上一个 URL。forward()加载 History 列表中的下一个 URL。go(url or number)加载 History 列表中的一个 URL，或要求浏览器移动指定的页面数。back()方法相当于后退按钮方法相当于后退按钮forward()方法相当于前
19、进按钮方法相当于前进按钮go(1)代表前进代表前进1页，等价于页，等价于forward()方法；方法；go(-1)代表后退代表后退1页，等价于页，等价于back()方法；方法；location含有当前含有当前URL的信息，可通过其属性获得这些信息的信息，可通过其属性获得这些信息 常用属性常用属性JavaScript的内置对象的内置对象名称名称说明说明protocol返回地址协议，值为返回地址协议，值为“http:”,“https:”,“file:”等等hostname返回地址的主机名返回地址的主机名port返回地址的端口号返回地址的端口号host返回主机名和端口号返回主机名和端口号pathna
20、me返回路径名返回路径名hash返回返回url中中“#”以及以后的内容以及以后的内容search返回返回“?”以及以后的内容以及以后的内容href返回整个返回整个url JavaScript的内置对象的内置对象location常用方法：常用方法：名称名称说明说明reload重新打开文档重新打开文档replace打开一个打开一个URL，并取代历史对象中当前位置，并取代历史对象中当前位置的地址。的地址。用这个方法打开一个用这个方法打开一个URL后，按下浏览器的后，按下浏览器的“后退后退”键将不能返回到刚才的页面键将不能返回到刚才的页面assign把一个新的把一个新的url赋给赋给location对
21、象，对象，location.assign(“http:/”);history 和location对象-2Location 对象 属性 方法名称 说明 host设置或检索位置或 URL 的主机名和端口号hostname设置或检索位置或 URL 的主机名部分href设置或检索完整的 URL 字符串名称说明assign(url)加载 URL 指定的新的 HTML 文档。reload()重新加载当前页replace(url)通过加载 URL 指定的文档来替换当前文档 history 和location对象-3返回返回 前进前进刷新刷新首页首页跳转到其他版块跳转到其他版块 新闻贴图新闻贴图 网上谈兵网上
22、谈兵 IT茶馆茶馆 教育大家谈教育大家谈 查看完整代码查看完整代码添加选项改添加选项改变事件变事件获取被选中的获取被选中的下拉菜单项下拉菜单项value的值的值网址对象的应用：Window.location.href=“index.html”浏览器信息（navigator）对象navigator.appName：浏览器名称navigator.appVersion：浏览器版本navigator.appCodeName：浏览器内码名称navigator.platform：用户操作系统不同的浏览器其浏览器信息对象所提供的信息内容各不相同，因此不能完全依靠浏览信息对象来识别用户所使用的浏览器 常见错误如何设置下拉菜单中的默认选中的第一项？如何设置下拉菜单中的默认选中的第一项？如何使页面内容居中？如何使页面内容居中？插入一行一列的表格，然后居中，高度、宽度都为插入一行一列的表格，然后居中，高度、宽度都为100下拉菜单是否选中的办法：在菜单项中添加下拉菜单是否选中的办法：在菜单项中添加selected属性即可属性即可 网上谈兵网上谈兵 IT茶馆茶馆 新闻贴图新闻贴图 教育大家谈教育大家谈 总结请简述HTML文档的树状结构？window对象有哪些常用的方法及其含义？请列举location和history对象的常用方法？