一个简单的例子看明白如何利用window.location.hash实现ajax操作时浏览器的前进/后退功能

最新推荐文章于 2022-07-02 16:24:33 发布

海拉姆

最新推荐文章于 2022-07-02 16:24:33 发布

阅读量635

点赞数

分类专栏：前后端分离前端路由后端路由

前后端分离同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端路由后端路由

7 篇文章 0 订阅

订阅专栏

我们知道JavaScript中很早就提供了window.history对象，利用history对象的forward()、Go()、back()方法能够方便实现不同页面之间的前进、后退等这种导航功能。但是AJAX操作，是不能用浏览器的前进和后退按钮进行导航的，因为浏览器并不会将AJAX操作加入到历史记录中。但是借助location.hash，我们能够自己实现AJAX操作的前进和后退。关于window.location.hash的详细介绍和使用方式，可以参考下面这2篇文章。

location.hash详解和 6 Things You Should Know About Fragment URLs。

我们需要知道以下2点：

1.如果location.hash发生了变化，那么浏览器地址栏url会发生变化，而且浏览器会产生1个历史记录。

2.如果location.hash发生了变化，会产生一个hashchange事件，我们可以处理这个事件。

[html]view plaincopy 
   
 <!DOCTYPE html>   
 <html>  
 <head>  
     <meta charset="utf-8">  
     <script type="text/javascript" src="jquery-1.11.1.min.js"></script>       
     <script type="text/javascript">         
       
         var currentPageIndex = 0;  
                   
         window.onload = function(){  
             currentPageIndex = 0;  
             showPageAtIndex(currentPageIndex);  
             recordHash(currentPageIndex);  
         }  
           
         // onhashchange可以监控hash变化  
         window.onhashchange=function(){  
             var hash = window.location.hash;  
               
             var id = parseInt(hash.substr(1));  
               
             showPageAtIndex(id);  
         };  
                   
         function toNextPageWhenClick()  
         {  
             currentPageIndex++;  
               
             if(isValidPageIndex(currentPageIndex))  
             {  
                 showPageAtIndex(currentPageIndex);  
                 recordHash(currentPageIndex);  
             }  
             else  
             {  
                 return;  
             }  
         }  
           
         function showPageAtIndex(id)  
         {  
             $("div[id!="+id+"]").hide();  
             $("#"+id).show();  
               
             if(isHomePage(id))  
             {  
                 $("input").attr("value","current is home page,next page=1");  
             }  
             else if(isLastPage(id))  
             {  
                 $("input").attr("value","current page="+id+", it is the end.");  
             }  
             else  
             {  
                 $("input").attr("value","current page="+id+",next page="+(id+1));  
             }  
         }  
           
         function isValidPageIndex(id)  
         {  
             return id <= 5;  
         }  
           
         function isLastPage(id)  
         {  
             return id == 5;  
         }  
           
         function isHomePage(id)  
         {  
             return id == 0;  
         }  
           
         // hash改变,浏览器会自动生成一个历史记录  
         function recordHash(id)  
         {  
             window.location.hash=id;  
         }  
     </script>  
       
     <style>  
         .navigate{  
             height:100px;  
             width:300px;  
             background-color:#0000ff;  
             display:none;  
         }  
           
         .home{  
             height:100px;  
             width:300px;  
             background-color:#00ff00;  
             display:none;  
         }  
           
         .last{  
             height:100px;  
             width:300px;  
             background-color:#ff0000;  
             display:none;  
         }  
     </style>  
 </head>   
 <body>  
     <input type="button" value="" onclick="toNextPageWhenClick();">  
       
     <div class="home" id="0">HOME PAGE</div>  
     <div class="navigate" id="1">ajax1</div>  
     <div class="navigate" id="2">ajax2</div>  
     <div class="navigate" id="3">ajax3</div>  
     <div class="navigate" id="4">ajax4</div>  
     <div class="last" id="5">last page</div>  
 </body>  
 </html>  

在chrome下运行这个html文件，默认显示home page，点击按钮的时候回调到下一个页面(直到最后一个页面为止)。我们可以点击浏览器的前进、后退按钮，实现模拟ajax前进、后退的功能。

海拉姆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的例子看明白如何利用window.location.hash实现ajax操作时浏览器的前进/后退功能

我们知道JavaScript中很早就提供了window.history对象，利用history对象的forward()、Go()、back()方法能够方便实现不同页面之间的前进、后退等这种导航功能。但是AJAX操作，是不能用浏览器的前进和后退按钮进行导航的，因为浏览器并不会将AJAX操作加入到历史记录中。但是借助location.hash，我们能够自己实现AJAX操作的前进和后退。关于window
复制链接

扫一扫