考试系统--前进/后退功能
页面上常常有返回button,回到上一页面,怎样做到?
曾经的时候不知道有好的方法,所以就是给button上带上所实用的上的參数所有传回去,然后依据參数又又一次载入一遍.当时这么做的时候,没有想过浏览器的前进,后退功能,假设这个跟我带參数一样做的话,那得多费劲.后来发现,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 /> <spanonclick="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 /> <spanonclick="goBack();">上一页</span></td> <td> <ahref="ThirdPage.aspx">去第三页</a><br /><hr /> <spanonclick="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/> <spanonclick="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 onclick="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(),这个实现又一次载入,刷新的功能.可是使用这个,假设文本框中有数据是会刷空的.还有这个写在server端控件用onClientClick,前进后退是无论用的.
<asp:LinkButtonID="LinkButton1" runat="server"OnClientClick="goForward();">LinkButton</asp:LinkButton>欧了,差点儿相同了.
知道了这样的的前进,后退,对以后跳转页面用处多多.