《HTML教程》-8.2-8.3教学材料

◆location.pathname——返回当前网页的路径和文件名。◆tocol——返回网络应用的协议名称（http://或https://）。◆location.assign——载入一个新的网页。这些用法比较简单，下面举个例子。在这个例子中用到的网页结构如下：<divid="con">网页信息</div><buttonid="redirect">百度</button>在页面加载时读取网页相关的信息：URL地址、主机名称、路径名和使用的协议，并显示在ID为con的div中。如果按“百度”按钮，则当前网页重定向到百度页面（）。读取网页相关信息的代码如下：functionlistInfo(){ varinfo="URL="+location.href +"<br/>主机名="+location.hostname +"<br/>路径="+location.pathname +"<br/>协议="+tocol; document.getElementById("con").innerHTML=info;}这段代码主要是通过location对象的href读取网页的URL，hostname属性读取主机名，pathname属性读取网页的路径和文件名称，通过protocol属性读取使用的协议名，然后组成一个字符串。并通过document.getElementById()方法查找网页中ID为con的div元素，再使用div元素的innerHTML属性将组合好的信息显示在div元素中。点击“百度”按钮要跳转到百度网页，需要给“百度”按钮注册单击事件处理程序，在处理程序中调用location对象的assign()方法，将百度地址传递给它就可以了。所需要代码如下：ocument.getElementById("redirect").onclick=function(){location.assign("");};通过document.getElementById("redirect")获取ID为redirect的按钮，通过匿名函数处理按钮的单击事件。完整的代码如清单8-6所示，对应的源代码见随书源码的Listing8-6.html。8.3history对象

history对象保存了访问过的URL的历史信息，还可以通过它在这些历史之间前后移动，即到达已经访问过的页面。history对象作为window对象的一部分，或者说window对象的history属性指向History对象。history对象的常用属性和方法：

◆length属性——history对象中历史URL的条数。◆state属性——当前URL对应的状态信息。若当前URL地址不是通过pushState或者replaceState产生的，则state为null。◆back()方法——返回history列表中的前一个URL（即后退）。◆forward()方法——前进到history列表中的下一个URL（即前进）。◆go()方法——加载history列表中的某个具体页面。其参数可以是数字，可正可负，正数表示前进，负数表示后退；也可以是字符串，但必须是一个完整的URL地址。HTML5引入了两个新方法：pushState和replaceState，这两个方法允许修改history中的历史条目。这两个方法的详细描述如下：pushState(state,title,url)——用于向history对象中添加一个条目。参数描述如下：◆state——与新创建的新历史记录相关的state对象。这个state对象可以是任意的JavaScript对象，可要能够序列化即可，但大小有一定限制，mozilla规定不超过640K。浏览器将这个state对象保存在用户的磁盘上，浏览器重启后可以还原这个state。如果大小超640K的话，推荐使用HTML5的localeStorage和sessionStorage，Event对象中也有一个state属性，与history.state是一样的。◆title——要创建历史条目的页面标题，注意它与<title>标记指定的标题没有关系。◆url——新历史条目的URL地址，可以是绝对地址，也可以是相对地址，但不能是跨域的地址。如果是相对地址的话，则以当前页面为准。若为跨域地址则抛出异常。但请注意，调用此方法并不会加载指定的这个URL。该参数为可选参数，如果没有指定，则为当前页面的地址。replaceState(state,title,url)——用于修改当前历史条目，用法与pushState()类似，参数也与pushState一致，在此不再赘述。HTML5还引入了一个onpopstate事件，在当前历史条目发生改变时触发，即单击“前进”和“后退”按钮，或调用go()、forward()和back()时触发该事件。注意，调用pushState和replaceState方法不会触发onpopstate事件。注意，调用pushState和replaceState方法不会触发onpopstate事件。在这个例子中创建一个history.state对象，并把它通过pushState方法添加到history对象中；并给onpopstate对象注册一个事件处理函数，在这个函数中简单的把文件标题改成state对象中的标题，并通过alert()方法提示用户。操作步骤第一步是创建一个history.state对象。前面讲过这个state对象是任意的对象，只要能够序列化即可。下面声明一个state对象，当然也可以是其他的结构，这只不过是一个例子：varstate={//我们创建的state对象 title:"pushStatedemo", url:"Listing8-6.html"};第二步，通过调用pushState方法向history对象添加一条历史条目，代码如下：history.pushState(state,"pushStatedemo","Listing8-6.html");这里的state就是上一步创建的state对象，"pushStatedemo"是这个历史条目的标题，"Listing8-6.html"是这个历史条目对应的URL，注意此时浏览器不会加载这个Listing8-6.html网页文件。第三步，就是要为onpopstate事件注册事件处理函数，需要的代码如下：window.onpopstate=function(e){ document.title=e.state.title; alert(e.state.title);}从这段代码可以看出，onpopstate是window对象的一个事件。用匿名函数作为事件处理函数。匿名函数中参数e就是发生的事件对象，它有一个state属性，指向存放在history中的state对象；e.state.title中的title就是第一步中声明的state对象中的title属性。document.title用于访问文档的title属性，这里用于对title赋值，也就是把当前文档的title修改为history.state对象中的title的值。第四步，就是要在网页中提供触发onpopstate事件的活动，前面讲过只有“在当前历史条目发生改变时触发”，也就是单击“前进”和“后退”按钮时触发，或者调用history的forward(),back()和go()时触发该事件。通过两个链接，在链接的onclick事件中调用go()方法触发onpopstate事件，代码如下：<ahref=""onclick="history.go(-1);">前一页</a><ahref=""onclick="history.go(1);">后一页</a> 这里的go(-1)是指向历史的前一条记录，go(1)是指向历史的后一条记录。完整的代码如清单8-7所示。完整的代码见随书源码的Listing8-6.html。要对这个例子进行测试的话比较复杂，因为pushState方法传递的URL不能是跨域的地址，所以如果直接从硬盘上运行Listing8-6.html的话，会收到一条如下的错误信息它的意思是，由于文档的源——由规则（scheme）、主机（host）和端口（port）组成——为null，所以不能为URL地址添加历史条目。所以要想运行这个例子，必须把它放在服务器上。这里我们把Listing8-6.html文件放在Tomcat的webapps\ROOT文件夹下，启动Tomcat