考试系统--前进/后退功能

页面上常常有返回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>

欧了,差点儿相同了.

知道了这样的的前进,后退,对以后跳转页面用处多多.