| 16.3 Window对象的子对象 Window对象是DOM对象模型中的顶层对象，其他对象都是Window的子对象，本节只介绍几个简单的子对象，其他复杂的对象将单独作为一章来介绍。 16.3.1 screen对象：获取计算机屏幕的一些属性 screen对象有很多属性，利用这些可以获得关于计算机屏幕的一些信息，比如长度、宽度等，这里只介绍几个比较常用的属性。 1．availHeight属性 【功能说明】该属性用于获取计算机屏幕工作区域的高度，所谓的工作区域就是指计算机屏幕上除了工具条以外的其他区域，利用availHeight属性可以获取之一区域的高度。 【基本语法】[iheight=]screen.availHeight 其中，iheight为整型变量，单位为px（像素），用于接收该属性的值。 2．availWidth属性 【功能说明】该属性以像素为单位返回计算机屏幕工作区域的宽度。该属性和availHeight属性一样都是只读属性，不能改变它们的值。 【基本语法】[iwidth=]screen.availWidth 其中，iwidth为整型变量，用于接收availWidth属性的返回值。下面的代码演示了如何利用availHeight属性和availWidth属性获取计算机屏幕工作区域的尺寸。 【实例演示】 <script> var iheight=100; var iwidth=100; var intervalID; //移动窗口至计算机屏幕的右上角并调整窗口大小 window.moveTo(0,0); window.resizeTo(iwidth,iheight); intervalID=window.setInterval(loadWindow,1); function loadWindow() { /* 首先增加窗口的高度至屏幕工作区域高度 然后再增加窗口的宽度至屏幕工作区域的宽度 窗口的高度和宽度都达到屏幕工作区域的尺寸时，停止*/ if(iheight<screen.availHeight) iheight+=3; else if(iwidth<screen.availWidth) iwidth+=3; else window.clearInterval(intervalID); window.resizeTo(iwidth,iheight); } </script> 这段代码利用screen对象的availHeight属性和availWidth属性获取了计算机屏幕工作区域的尺寸，然后逐渐增加窗口的高度至计算机屏幕工作区域的高度，再增加窗口的宽度至计算机屏幕工作区域的宽度。 3．height、width属性 【功能说明】这两个属性以像素为单位返回了计算屏幕的垂直分辨率和水平分辨率，因此，这两个属性的返回值均为整型数据。 【基本语法】screen.height screen.width 【实例演示】 <script> var iheight; var iwidth; iheight=screen.height; iwidth=screen.width; window.document.write("计算机的当前分辨率为:"+iheight+"×"+iwidth); </script> 这段代码利用height属性和width属性获取了当前计算机的分辨率。运行这段代码后，可以看到效果如图16.17所示。 图16.17 height和width属性演示 16.3.2 location对象：设置或获取当前URL的信息 使用location对象可以设置或返回URL中的一些信息，一个完整的URL地址的格式为： 协议://主机:端口/路径名称#hash标识?搜索条件 其中，协议是URL的起始部分，用于指定该URL地址所采用的通信协议，比如http、ftp等；主机是指该URL所对应的服务器的名称；端口用于指定服务器用于通信的端口号，与主机名之间使用冒号隔开；路径名称是指该URL所对应的网页文件在服务器上的虚拟路径；如果页面中含有锚点连接，可以使用hash标志指定页面中的锚点标志，该标志以“#”开头；搜索条件是指URL中所含有的查询条件，该查询条件以“?”开头，以“变量名称=值”的形式出现，多个查询条件之间使用连接符“&”连接。比如：http://upc.edu.cn:8080/wwwroot/ index.html#topicID?id=3876。 利用location对象可以方便地设置或获取URL中的各种信息，本节将详细介绍location对象的一些常用属性和方法。 1．hash属性 【功能说明】设置或获取URL中的锚点名称，如果Web页面中使用的锚点连接，通过设置location对象的hash属性可以方便的跳转到页面中的不同部分。 【基本语法】location.hash 下面的代码演示了如何在网页中使用location对象的hash标志快速定位页面中的 内容。 【实例演示】 <script> function getAnchor(str) { window.location.hash=str; } </script> <body> //创建锚点链接，快速定位网页内容 <a href="javascript:getAnchor('jueju');">杜甫 绝句</a> <a href="javascript:getAnchor('yijianmei');">李清照 一剪梅</a> <a href="javascript:getAnchor('hanghelou');">崔颢 黄鹤楼</a> //下面定义了3个锚点 <a name="jueju"><center>绝句</center> <!--古诗内容省略，见源代码--> </a><br><br><br><br><br> <a name="yijianmei"><center>一剪梅</center> <!--古诗内容省略，见源代码--> </a><br><br><br><br><br> <a name="hanghelou"><center>黄鹤楼</center> <!--古诗内容省略，见源代码--> </a> </body> 这段代码在一个网页文件中创建了3个锚点链接，单击其中任一个链接，程序就会调用getAnchor函数来设置location对象的hash属性为相应的值，以使页面滚动到指定的内容上。运行这段代码，将窗口缩小并单击链接“崔颢 黄鹤楼”则可以看到图16.18所示的效果。 图16.18 hash属性演示 2．host属性 【功能说明】设置或返回URL地址中主机的名称和端口号。如果URL中没有显示的指定端口号，则host属性的返回值和hostname属性的返回值相同。 【基本语法】location.host 3．hostname属性 【功能说明】设置或返回location对象或URL地址中的主机名称或者主机的IP地址。对大多Web站点服务器来说，该属性的返回值还包含域名和3w标志。 【基本语法】location.hostname 4．port属性 【功能说明】设置或返回URL地址中的服务器端口号。如果URL中没有指定通信端口号，则该属性的返回值为空字符串。 【基本语法】location.port 5．pathname属性 【功能说明】设置或返回URL所对应的网页文件的虚拟路径，其中包括网页文件的文件名。 【基本语法】location.pathname 6．protocol属性 【功能说明】设置或返回URl中所包含的通信协议，其中包括“:”，如http:、ftp:等。 【基本语法】location.protocol 【实例演示】下面的代码演示了如何利用上面几个属性获取URL中的相应信息。 <table align="center" border="1" bordercolor="#009900" style="border-collapse:collapse"> <script> with(document) { writeTable("属性","属性值"); writeTable("URL",location.href); writeTable("host",location.host); writeTable("hostname",location.hostname); writeTable("port",location.port); writeTable("pathname",location.pathname); writeTable("protocol",location.protocol); } function writeTable(str1,str2) { with (document) { write("<tr>"); write("<td>");write(str1);write("</td>"); write("<td>");write(str2);write("</td>"); write("</tr>"); } } </script> </table> 这段代码通过自定义函数以表格的形式输出了location对象的部分属性和属性值，运行这段代码可以看到图16.19所示的页面效果。 7．href属性 【功能说明】该属性为location对象的默认属性，是location对象中最常用的属性。利用该属性可以设置或返回整个URl字符串，通过重新设置location对象的URL地址，可以使窗口中的内容跳转到指定的Web页面。 【基本语法】location.href[=surl] 其中，surl是要跳转到的URL地址。 注意：href属性返回的URL地址是经过编码以后的字符串，比如空格被显示为%20，要想得到编码前的URL字符串信息，可以使用unescape()函数进行处理。 【实例演示】下面的代码演示了如何通过设置location对象的href属性来跳转到指定的页面。 <body> 选择页面 <select onChange="window.location.href=this.options[this.selectedIndex].value"> <option value="http://www.baidu.com">百度</option> <option value="http://www.google.com">谷歌</option> <option value="http://www.hao123.com">hao123</option> </select> </body> 运行这段代码可以看到图16.20所示的页面，从列表框中选择一个页面，程序就会加载相应的页面到当前窗口中。 图16.19 location对象属性的使用演示 图16.20 href属性演示 8．search属性 【功能说明】设置或返回URL地址中的查询信息，即URL中的问号及问号以后的信息。如果HTML表单中的数据采用get方法进行传输（默认），则表单中的数据信息将以查询条件的形式传送给处理页面。因此可以使用location对象的search属性来获取这些数据并进行处理。 【基本语法】[sSearch=]location.search 其中，sSearch为返回的查询条件字符串。 【实例演示】下面的例子演示了如何获取并处理URL中的查询字符串。首先创建一个HTML表单，主要代码如下。 <form action="search.html"> 姓名<input type="text" size="10" name="name"><br> 年龄<input type="text" size="4" name="age"><br> 住址<input type="text" name="address"><br> <input type="submit" value="提交"> </form> 这个HTML表单中指定了使用“search.html”来处理表单中的数据，该文件中的主要代码如下所示。 <script> var arrSearch=new Array(); //调用函数处理查询条件信息 analysisSearch(); writeSearchInfor(); //分析location.search属性的值，从中分离出变量和值 function analysisSearch() { var sSearch=unescape(location.search); sSearch=sSearch.substr(1); arrtemp=sSearch.split("&"); for(var i=0;i<arrtemp.length;i++) { temp=arrtemp[i].split("="); arrSearch[temp[0]]=temp[1]; } } //输出分析结果 function writeSearchInfor() { document.write(arrSearch["name"]+"你好,下面是您的个人信息：<br>"); for(var sitem in arrSearch) { var str; str="<li>"+sitem+":"+arrSearch[sitem]+"</li>" document.write(str); } } </script> 这段代码中定义了一个函数anlysisSearch，该函数利用String对象的一些方法函数把location对象的search属性返回的查询条件字符串分割并存储在了数组arrSearch中。函数writeSearchInfor则实现了输出分析结果的功能。 首先运行含有HTML表单的文件并在表单中填写数据，如图16.21所示，单击“提交”按钮后，程序会调用“search.html处理”表单中的数据并输入分析结果，如图16.22所示。 图16.21 HTML表单中输入的数据 图16.22 分析结果 9．assign方法 【功能说明】该方法的作用与href属性的作用效果相同，可以将当前窗口中的显示内容跳转到指定的URL地址。 【基本语法】location.assign(sURL) 其中，sURL为要跳转到的URL地址。 【实例演示】将href属性的演示实例的代码修改如下，可以实现相同的效果。 <body> 选择页面 <select onChange="window.location.assign(this.options[this.selectedIndex].value)"> <option value="http://www.baidu.com">百度</option> <option value="http://www.google.com">谷歌</option> <option value="http://www.hao123.com">hao123</option> </select> </body> 10．reload方法 【功能说明】该方法的作用与浏览器工具栏上的刷新按钮相似，可以重新加载当前页面至浏览器窗口，该方法的功能更加强大。 【基本语法】location.reload([breload]) 其中，breload为布尔型变量或常量，为True表明要从服务器上重新加载当前页面；为False时表明从缓存中重新加载当前页面。 【实例演示】下面的代码演示了reload方法和使用浏览器刷新的区别。 <form> 文本框<input type="text" > <input type="checkbox" value="test">复选框<br> 列表框<select> <option value="http://www.baidu.com">百度</option> <option value="http://www.google.com">谷歌</option> <option value="http://www.hao123.com">hao123</option> </select><br> <input type="button" value="从服务器刷新" onClick="window.location.reload(true);"> <input type="button" value="从缓存中刷新" onClick="window.location.reload(false);"> </form> 运行这段代码并在其中输入一些数据如图16.23所示，单击浏览器上的刷新按钮以后，表单中的数据将继续存在，而单击表单中的刷新按钮之后表单中的数据将被清空。 11．replace方法 【功能说明】使用指定的页面来替换当前窗口中的文档内容，使用该方法后当前页面也会被从history对象中清除掉，因此当前页面不会出现在浏览器的历史记录中，使用浏览器的“前进”或者“后退”将无法再次查看本页面。 【基本语法】location.replace(sURL) 其中，sURL是要用来替换当前窗口中文档内容的页面的URL地址。。 【实例演示】下面的代码演示了replace方法的用法和作用 <script> function toReplace(sURL) { window.location.replace(sURL); } </script> <form> <input type="button" value="替换" onClick="toReplace('16.3.2 location对象_hash.html')"> </form> 运行这段代码后窗口会出现一个“替换”按钮，单击该按钮后程序会调用“16.3.2 location对象_hash.html”页面来替换当前页面，如图16.24所示，可以看到浏览器窗口中的“后退”按钮处于不可用状态，因此无法使用“后退”按钮后退到替换前的页面中。 图16.23 reload方法演示 图16.24 replace方法演示 16.3.3 history对象：访问最近所访问的URL的列表 在浏览Web页面时，浏览器会将最近访问过的页面的URL地址保存在一个地址中，使用history对象可以访问这一列表。history对象共有4个属性和3个方法依次介绍如下。 1．current属性 【功能说明】该属性为只读属性，用于返回在历史记录列表中当前所访问的历史页面的URL地址。 【基本语法】history.current 说明：由于用户的历史页面中往往含有敏感信息，如果所有的Web页面都可以使用history对象获取到用户的历史访问记录，就会导致用户的隐私或敏感数据被他人窥探，因此，只有具有签名脚本的网页才可以使用history对象的current、next和previous属性来获取历史页面的URL地址。 2．next属性 【功能说明】该属性为只读属性，用于返回在历史记录列表中当前所访问的历史页面的下一条记录的URL地址。 【基本语法】history.next 3．previous属性 【功能说明】该属性为只读属性，用于返回在历史记录列表中当前所访问的历史页面的上一条记录的URL地址。 【基本语法】history.previous 4．length属性 【功能说明】只读属性，返回历史记录列表中的记录条数。 【基本语法】[nCount=]history.length 其中，nCount为整型数据，用于存储length属性返回的历史列表中的记录数目。 【实例演示】下面的代码演示了如何使用length属性得到当前窗口中的历史记录的数目。 <script> var nCount=window.history.length; document.write("您曾使用该窗口访问过"+nCount+"个页面"); </script> 运行这段代码可以看到图16.25所示的页面。 5．back、forward方法 【功能说明】该两个方法的作用分别与浏览器工具栏上的“后退”和“前进”按钮的作用相同，通过back方法可以返回到历史记录中前一条记录所对应的页面；而使用forward方法则可以跳转到历史记录中下一条记录所对应的网页中。 【基本语法】history.back() history.forward() 【实例演示】 <body> <a href="javascript:window.history.back();">前进</a> <a href="javascript:window.history.forward();">后退</a> </body> 这段代码在页面上创建了“前进”和“后退”的超级链接，如图16.26所示，通过这两个链接可以跳转到历史记录中的上一页和下一页。 图16.25 length属性演示 图16.26 back和forward方法演示 6．go方法 【功能说明】从历史列表中加载指定的页面到当前窗口。如果指定的页面超出了历史记录的范围，则历史记录中的最后一页或者最前一页将被显示在窗口当中。 【基本语法】history.go(vloation) 其中，vlocation为必选参数，整数或者字符串，用于从历史记录中调用页面。如果为整数则调用历史记录列表中相对为当前记录的页面；如果为字符串则为历史记录中某一记录所对应的URL地址。因此，可以使用history.go(-1)和history.go(1)实现history.back和history. forward的作用。 【实例演示】使用下面的代码同样可以实现前进和后退的功能。 <body> <a href="javascript:window.history.go(-1);">前进</a> <a href="javascript:window.history.go(1);">后退</a> </body>
http://blog.csdn.net/cdefu/article/details/3936306原文链接，自留学习
| 
79
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
