html5 history 信息api pushState

時間  2019-11-13
標籤 html5 html history 信息 api pushstate 欄目 HTML5 简体版
原文   原文鏈接

這個功能能夠進行傳參，還能夠解決ajax沒法前進和倒退的問題html

 

 

首先，history新增的兩個方法history.replaceState()和history.pushState()方法屬於HTML5瀏覽器新增的屬性，因此IE9如下的是不支持的。jquery

 

直接上代碼：ajax

history.replaceState() 顧名思義就是替換的意思，因此它的做用就是替換當前地址欄的url數組

 

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <head>  
  3.   <script src="jquery-1.8.2.min.js"></script>  
  4.       
  5. <style>  
  6.   
  7. </style>  
  8. <script>  
  9. $(function(){  
  10.     $("#bt").click(function(){  
  11.         history.replaceState({data:111},"1222","aa.html");  
  12.         return false;  
  13.     });  
  14. })  
  15.   
  16. </script>  
  17. </head>  
  18. <body class="sapUiBody">  
  19.     <input type="button" id="bt" value="show">  
  20.       
  21. </body>  

點擊按鈕後，能夠看到頁面地址欄的地址變了，可是頁面並無刷新。瀏覽器

 

history.replaceState(data,"頁面的title","須要改變的url") 接收三個參數數據結構

 

history.pushState() 看到push你們首先應該想到的是數組，沒錯，這個方法就是往瀏覽器的history裏壓入一條url，就像數據結構裏的棧同樣，這個壓入的url會在棧url

的最頂端，當你點擊瀏覽器的前進或者倒退按鈕時，便會拿出棧頂的url來定位，從而達到改變history的做用可是並不刷新！spa

 

 

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <head>  
  3.   <script src="jquery-1.8.2.min.js"></script>  
  4.       
  5. <style>  
  6.   
  7. </style>  
  8. <script>  
  9. $(function(){  
  10.     $("#bt").click(function(){  
  11.         history.pushState({data:111},"1222","aa.html");  
  12.         history.pushState({data:111},"1222","ab.html");//多壓入幾條  
  13.         return false;  
  14.     });  
  15. })  
  16.   
  17. </script>  
  18. </head>  
  19. <body class="sapUiBody">  
  20.     <input type="button" id="bt" value="show">  
  21.       
  22. </body>  


其次是.net

window.addEventListener('popstate', function(event) {     
   console.log(event.state);//data  });

還記得上面的pushState方法麼，當你往history的棧裏經過調用這個方法壓入多條數據時，而且你經過點擊瀏覽器的前進倒退按鈕進行改變的時候，這個事件就觸發了，而後就code

是event.state就是上面方法的第一個參數data，而且是和url一一對應的，這樣就實現了傳值

 

 

 

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <head>  
  3.   <script src="jquery-1.8.2.min.js"></script>  
  4.       
  5. <style>  
  6.   
  7. </style>  
  8. <script>  
  9. $(function(){  
  10.     $("#bt").click(function(){  
  11.         history.pushState({data:111},"1222","aa.html");  
  12.         history.pushState({data:111},"1222","ab.html");//多壓入幾條  
  13.         return false;  
  14.     });  
  15.       
  16.     window.addEventListener('popstate', function(event) {       
  17.         console.log(event.state);    
  18.         });  
  19. })  
  20.   
  21. </script>  
  22. </head>  
  23. <body class="sapUiBody">  
  24.     <input type="button" id="bt" value="show">  
  25.       
  26. </body>  

最後，經過這種方法能夠在popstate的事件裏寫本身的邏輯了，如發送ajax等

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程