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

         页面上经常有返回按钮,回到上一页面,如何做到?

         以前的时候不知道有好的方法,所以就是给按钮上带上所有用的上的参数全部传回去,然后根据参数又重新加载一遍.当时这么做的时候,没有想过浏览器的前进,后退功能,如果这个跟我带参数一样做的话,那得多费劲.后来发现,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>

         欧了,差不多了.

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