自動外鏈工具 在線排版工具 搜索引擎提交入口 wordpress主題推薦 批量打開網址工具 【老域名購買】 思享SEO導航 【網站合作】

使用JavaScript修改瀏覽器URL地址但不刷新頁面

1090

現在的瀏覽器里,有一個十分有趣的功能,你可以在不刷新頁面的情況下修改瀏覽器URL;在瀏覽過程中.你可以將瀏覽歷史儲存起來,當你在瀏覽器點擊后退按鈕的時候,你可以沖瀏覽歷史上獲得回退的信息,這聽起來并不復雜,是可以實現的,我們來編寫些代碼。來看看它是如何工作的。

  1. var stateObject = {};  
  2. var title = "Wow Title";  
  3. var newUrl = "/my/awesome/url";  
  4. history.pushState(stateObject,title,newUrl);  

History 對象 pushState() 這個方法有3個參數,你可以從上面的例子看到。第一個參數,是一個Json對象 , 在你儲存有關當前URl的任意歷史信息.第二個參數,title 就相當于傳遞一個文檔的標題 ,第三個參數是用來傳遞新的URL. 你將看到瀏覽器的地址欄發生變化而當前頁面并沒刷新。

讓我們看一個例子,在這個例子中我們將在每個獨立的URL中存儲一些任意數據。

  1. for(i=0;i<5;i++){  
  2.   var stateObject = {id: i};  
  3.   var title = "Wow Title "+i;  
  4.   var newUrl = "/my/awesome/url/"+i;  
  5.   history.pushState(stateObject,title,newUrl);  
  6. }  

現在運行,點擊瀏覽器的返回按鈕,查看URL是怎么改變的。對于每次URL的改變,是因為它存儲了歷史狀態“id”以及對應的值。但是我們怎么重新獲得歷史狀態,并且在此基礎上做些事情呢?我們需要對“popstate”添加事件監聽器,這將會在每次歷史對象的狀態改變的時候觸發。

  1. for(i=0;i<5;i++){  
  2.   var stateObject = {id: i};  
  3.   var title = "Wow Title "+i;  
  4.   var newUrl = "/my/awesome/url/"+i;  
  5.   history.pushState(stateObject,title,newUrl);  
  6.   alert(i);  
  7. }  
  8.   
  9. window.addEventListener('popstate', function(event) {  
  10.   readState(event.state);  
  11. });  
  12.   
  13. function readState(data){  
  14.   alert(data.id);  
  15. }  

現在你會看到無論什么時候你點擊返回按鈕,一個“popstate”事件就會被觸發。我們的事件偵聽器然后檢索歷史狀態對象與之關聯的URL,并提示“id”的值。

它是非常的簡單和有趣,不是嗎?

英語原文: http://hasin.me/2013/10/16/manipulating-url-using-javascript-without-freshing-the-page/

來源:本文由思享SEO博客原創撰寫,歡迎分享本文,轉載請保留出處和鏈接!
seo培訓評論廣告

搶沙發

昵稱*

郵箱*

網址

七乐彩选号技巧