html5入门教程(八)history详解

html-css010

html5入门教程(八)history详解,第1张

HTML5新添加了对历史的管理,用户可以通过”前进”和”后退”按钮进行历史页面的切换。这让一些不在新页面中打开的新页面前进后退自如,提高了用户体验。

通过haschange事件,可以知道URL的参数什么时候发生了变化,也就是什么时候该有所反应。通过状态管理的API,能够在不加载新页面的情况下改变浏览器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三个参数:1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)。小例子如下

执行了history.pushState()方法后,新的状态信息就会被加入到历史状态栈,而浏览器地址栏也会变成新的相对URL。但是,浏览器并不会想服务器发送请求,即使历史状态改变之后查新location.href也会返回与地址栏中相同的地址。另外,第二个参数目前还没有浏览器实现,所以完全可以只传入一个空字符串即可,或者一个短标题也可以。第一个参数则应该尽可能提供初始化页面状态所需的各种信息。

因为history.pushState()方法会创建新的历史状态,所以会发现”后退”按钮也可以使用了。按下”后退”按钮,会触发window对象的popstate事件。Popstate事件的事件对象有一个state属性,这个属性就包含着当初以第一个参数传递给pushState()的状态对象。小例子如下

更新状态直接更新当前地址栏的内容,他不会产生后退操作,只是单纯修改当前地址。

要更新当前历史状态,可以调用replaceState(),传入的参数与pushState()方法的前两个参数相同。调用replaceState()不会在历史状态栈中创建新状态,只会重写当前状态。小例子如下

网上例子:

他这个还是创建了一个数组,然后把生成的内容存到数组中,在根据传的值

把数组对应的内容给读出来。

history有个问题是第一次点击是无效的,只有第二次才能起作用。这就非常的不爽了。

通常我们也不会需要他执行特别复杂的操作,反而是hash非常的好用。

hash是直接在url后面加一个#,然后立即可以被onpopstate事件检测到。

于是我们可以这样去做:

第<%= p %>页 共<%= intpagecoun(这里相当于总的页面的变量数)%>页

<%if(p>1) { %>

<a href = "当前页面的名称.jsp? page=<%= 1%>" > 第一页</a>

<a href = "当前页面的名称.jsp? page= <%= p-1%>" > 上一页</a>

<% } %>

<%if(p<intpagecount这里意思是说如果当前页面小于总的页面) { %>

<a href="当前页面.jsp? page= <%= p+1 %>">下一页</a>

<a href="当前页面.jsp? page= <%=intpagecoun%>" >最后一页 </a>

下面的代码是按照你输入第几页就显示第几页的

<% } %>&bnsp&bnsp转到第<input type ="text"name="page" size="4">页

<input name ="submit" type="submit" value="GO"/></form></p>

也就是运用page 页面指令就可以完成页面的指定跳转了

在A页面输入完验证码通过后,传一个值给B页面,request.setAttribute("check","true")然后在B页面的开头取得这个值,String check = request.getAttribute("check")if(check==null||check=="").在A页面输入验证码,跳B页面。在A页面输入完验证码通过后,传一个值给B页面如果要求不能用后台实现,只在前台实现的话。

因为浏览器前进后退是直接读取浏览器缓存的html页面,而不是访问服务器。所以只要禁用浏览器缓存即可在后退前进时再去访问服务器,只要它访问服务器,我们这时就可以使用拦截器,判断session中是否有登录信息!这样就可以实现退出后点击浏览器后退不能退回到成功页面而是一直在登录页面!