页面上经常有返回按钮,回到上一页面,如何做到?
以前的时候不知道有好的方法,所以就是给按钮上带上所有用的上的参数全部传回去,然后根据参数又重新加载一遍.当时这么做的时候,没有想过浏览器的前进,后退功能,如果这个跟我带参数一样做的话,那得多费劲.后来发现,javascript的history对象包含浏览器的历史,用这个back()就可以做到返回,后退的功能.
为了研究一下这个history的方法,建立了三个页面,分别叫FirstPage.aspx,SecondPage.aspx和ThirdPage.aspx.三个界面的代码主要都是一个文本框,一个链接和一个span.文本框用于输入文本,看看前进或后退之后,文本是否可以保留;链接用于跳到下一个页面,因为需要浏览过,才会有上一个url和下一个url;还有就是一个span添加了onclick事件,事件就是javascript的history.back()或者history.forward()方法.
FirstPage的代码.
<form id="form1"runat="server">
<div>
<asp:TextBox ID="TextBox1"runat="server"></asp:TextBox><br />
<h3>第一页</h3>
<ahref="SecondPage.aspx">去第二页</a> <br />
<spanοnclick="goForward();">下一页</span>
</div>
</form>
效果图:
SecondPage的代码
<form id="form1"runat="server">
<div>
<asp:TextBoxID="TextBox1" runat="server"></asp:TextBox><br/>
<h3>第二页</h3>
<table border="1">
<tr>
<td>
<ahref="FirstPage.aspx">去第一页</a><br /><hr />
<spanοnclick="goBack();">上一页</span></td>
<td>
<ahref="ThirdPage.aspx">去第三页</a><br /><hr />
<spanοnclick="goForward();">下一页</span>
</td>
</tr>
</table>
</div>
</form>
效果图
ThirdPage.aspx
<form id="form1"runat="server">
<div>
<div>
<asp:TextBox ID="TextBox1"runat="server"></asp:TextBox><br /><hr />
<h3>第三页</h3>
<ahref="SecondPage.aspx">去第二页</a> <br /><hr/>
<spanοnclick="goBack();">上一页</span>
</div>
</div>
</form>
效果图:
每个页面都有一段javascript代码,为了简单,三个都是一样的,只是有的页面有的方法是没有调用的.
<scripttype="text/javascript">
function goBack()
{
window.history.back();
}
function goForward() {
window.history.forward();
}
</script>
运行代码,如果在第一个页面直接单击下一页是没有效果的,没有下一个url可以让他过去.
首先点击各个链接,从第一页,点下一页到第二页,从第二页到第三页.然后在第三页,点击span中的上一页,就会回到第二页.
在三个页面的文本框中分别输入1,2,3,回退或前进文字还是存在着.表示back(),forward()和浏览器的后退和前进的效果是一样的.上一个页面是什么样子回去之后还是什么样子.
如果我想从第三页,直接跳到第一页,如何做?
在第三个页面,添加一个span的
<span οnclick="goNum();">去上上页</span>
而在javascript中添加一个function
function goNum() {
window.history.go(-2);
}
效果图:
这样就能点击"去上上页"到第一页,而且文本框中输入也是不会刷没的.
这样的话,go(),back()和forward()都能实现保留数据的前进后退,go()和back()他们的区别是什么呢?
如果你使用go()的话,go(1)和forward()一样,go(-1)和back()一样.go(-2)就是上上页,go(2)就是下下页.对于go()的语法的是:history.go(number|URL),你可以输入number或者具体的url进行跳转,但是输入实际的url,不知道到底要输入什么样的才合适,反正我试的几种都不管用.
还有一点,如window.location.reload(),这个实现重新加载,刷新的功能.但是使用这个,如果文本框中有数据是会刷空的.还有这个写在服务器端控件用onClientClick,前进后退是不管用的.
<asp:LinkButtonID="LinkButton1" runat="server"OnClientClick="goForward();">LinkButton</asp:LinkButton>
欧了,差不多了.
知道了这种的前进,后退,对以后跳转页面用处多多.