ajax实用技术教学课件作者程继洪肖川李海斌编著第8章常用对象简介8.2-8.3.pptx

8.2 Location对象window.location对象可以获得当前网页的URL地址，也可以将浏览器重定向到新的网页。常用的属性和方法如下： ◆ location.href——返回当前网页的URL地址，或者指定要跳转的地址。 ◆ location.hostname——返回Web主机的域名。 ◆ location.pathname——返回当前网页的路径和文件名。 ◆ tocol——返回网络应用的协议名称（http:// 或https://）。 ◆ location.assign——载入一个新的网页。这些用法比较简单，下面举个例子。在这个例子中用到的网页结构如下： div id=con网页信息/div button id=redirect百度/button在页面加载时读取网页相关的信息：URL地址、主机名称、路径名和使用的协议，并显示在ID为con的div中。如果按“百度”按钮，则当前网页重定向到百度页面（）。读取网页相关信息的代码如下：function listInfo() { var info = 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.3 history对象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地址。HTML 5引入了两个新方法：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。