使用 JavaScript 修改瀏覽器 URL 位址列
現在的瀏覽器裡,有一個十分有趣的功能,你可以在不重新整理頁面的情況下修改瀏覽器URL;在瀏覽過程中.你可以將瀏覽歷史儲存起來,當你在瀏覽器點選後退按鈕的時候,你可以衝瀏覽歷史上獲得回退的資訊,這聽起來並不複雜,是可以實現的,我們來編寫些程式碼。來看看它是如何工作的。
var stateObject = {}; var title = "Wow Title"; var newUrl = "/my/awesome/url"; history.pushState(stateObject,title,newUrl);
History 物件 pushState() 這個方法有3個引數,你可以從上面的例子看到。第一個引數,是一個Json物件 , 在你儲存有關當前URl的任意歷史資訊.第二個引數,title 就相當於傳遞一個文件的標題 ,第三個引數是用來傳遞新的URL. 你將看到瀏覽器的位址列發生變化而當前頁面並沒重新整理。
讓我們看一個例子,在這個例子中我們將在每個獨立的URL中儲存一些任意資料。
for(i=0;i<5;i++){ var stateObject = {id: i}; var title = "Wow Title "+i; var newUrl = "/my/awesome/url/"+i; history.pushState(stateObject,title,newUrl); }
現在執行,點選瀏覽器的返回按鈕,檢視URL是怎麼改變的。對於每次URL的改變,是因為它儲存了歷史狀態“id”以及對應的值。但是我們怎麼重新獲得歷史狀態,並且在此基礎上做些事情呢?我們需要對“popstate”新增事件監聽器,這將會在每次歷史物件的狀態改變的時候觸發。
for(i=0;i<5;i++){ var stateObject = {id: i}; var title = "Wow Title "+i; var newUrl = "/my/awesome/url/"+i; history.pushState(stateObject,title,newUrl); alert(i); } window.addEventListener('popstate', function(event) { readState(event.state); }); function readState(data){ alert(data.id); }
現在你會看到無論什麼時候你點選返回按鈕,一個“popstate”事件就會被觸發。我們的事件偵聽器然後檢索歷史狀態物件與之關聯的URL,並提示“id”的值。
它是非常的簡單和有趣,不是嗎?
原文地址:manipulating-url-using-javascript-without-freshing-the-page
相關文章
- 【譯】使用 HTML5 History API 控制瀏覽器位址列 URLHTMLAPI瀏覽器
- 瀏覽器位址列裡輸入URL後的全過程瀏覽器
- js修改瀏覽器urlJS瀏覽器
- 使用瀏覽器位址列呼叫CXF Webservice的寫法瀏覽器Web
- 從瀏覽器位址列輸入url到顯示頁面的步驟瀏覽器
- 瀏覽器位址列輸入url回車之後發生了些什麼瀏覽器
- 在瀏覽器位址列輸入url到按下回車發生了什麼?瀏覽器
- 瀏覽器可以自動修改URL?瀏覽器
- chrome 瀏覽器位址列快速搜尋設定Chrome瀏覽器
- 使用瀏覽器命令列編寫JavaScript程式碼瀏覽器命令列JavaScript
- 經典面試題:在瀏覽器位址列輸入一個 URL 後回車,背後發生了什麼面試題瀏覽器
- 如何恢復谷歌瀏覽器Google Chrome位址列的HTTP和WWW字首谷歌瀏覽器GoChromeHTTP
- JS獲取瀏覽器位址列的多個引數值的任意值JS瀏覽器
- dlink路由器IE瀏覽器位址列輸入192.168.0.1無法找到路由器瀏覽器
- Chrome 瀏覽器修改 UA 模擬其它瀏覽器,包括移動瀏覽器Chrome瀏覽器
- 從瀏覽器位址列到顯示頁面的步驟瀏覽器
- Win10系統清除位址列瀏覽記錄的方法Win10
- Go Search Extension,快速在位址列搜尋 Go 文件的開源瀏覽器外掛Go瀏覽器
- 瀏覽器從輸入URL到渲染瀏覽器
- 瀏覽器輸入URL回車後...瀏覽器
- 谷歌瀏覽器禁用JavaScript谷歌瀏覽器JavaScript
- JavaScript瀏覽器事件物件JavaScript瀏覽器事件物件
- JavaScript 瀏覽器事件解析JavaScript瀏覽器事件
- javascript判斷當前瀏覽器是不是微信瀏覽器JavaScript瀏覽器
- 瀏覽器中輸入 URL 回車後瀏覽器
- 瀏覽器中輸入 URL 回車後...瀏覽器
- python處理瀏覽器URL編碼Python瀏覽器
- 瀏覽器野史 UserAgent列傳瀏覽器
- [URL轉碼]瀏覽器如何給URL進行轉碼的瀏覽器
- JavaScript 獲取瀏覽器的所使用語言JavaScript瀏覽器
- 使用 JavaScript 操作瀏覽器歷史記錄 APIJavaScript瀏覽器API
- 谷歌瀏覽器如何禁用javascript谷歌瀏覽器JavaScript
- javascript 獲取瀏覽器資訊JavaScript瀏覽器
- 使用瀏覽器事件瀏覽器事件
- 修改錄製指令碼時使用的預設瀏覽器指令碼瀏覽器
- 當在瀏覽器輸入URL回車後,瀏覽器到底做了什麼?瀏覽器渲染機制又是怎樣的?瀏覽器
- Js 和Url預設位址列編碼等處理JS
- php全面獲取url位址列及各種引數PHP