使用JavaScript修改瀏覽器URL地址欄的實現(xiàn)代碼
現(xiàn)在的瀏覽器里,有一個十分有趣的功能，你可以在不刷新頁面的情況下修改瀏覽器URL;在瀏覽過程中.你可以將瀏覽歷史儲存起來，當你在瀏覽器點擊后退按鈕的時候，你可以沖瀏覽歷史上獲得回退的信息，這聽起來并不復雜，是可以實現(xiàn)的，我們來編寫些代碼。來看看它是如何工作的。
var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);
History 對象 pushState() 這個方法有3個參數(shù),你可以從上面的例子看到。第一個參數(shù)，是一個Json對象 , 在你儲存有關當前URl的任意歷史信息.第二個參數(shù),title 就相當于傳遞一個文檔的標題 ，第三個參數(shù)是用來傳遞新的URL. 你將看到瀏覽器的地址欄發(fā)生變化而當前頁面并沒刷新。
讓我們看一個例子，在這個例子中我們將在每個獨立的URL中存儲一些任意數(shù)據(jù)。
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);
}
現(xiàn)在運行，點擊瀏覽器的返回按鈕，查看URL是怎么改變的。對于每次URL的改變，是因為它存儲了歷史狀態(tài)“id”以及對應的值。但是我們怎么重新獲得歷史狀態(tài)，并且在此基礎上做些事情呢？我們需要對“popstate”添加事件監(jiān)聽器，這將會在每次歷史對象的狀態(tài)改變的時候觸發(fā)。
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);
}
現(xiàn)在你會看到無論什么時候你點擊返回按鈕，一個“popstate”事件就會被觸發(fā)。我們的事件偵聽器然后檢索歷史狀態(tài)對象與之關聯(lián)的URL,并提示“id”的值。
它是非常的簡單和有趣，不是嗎？
英語原文： http://hasin.me/2013/10/16/manipulating-url-using-javascript-without-freshing-the-page/
相關文章
Electron 都發(fā)展這么多年了,讓人想不到的是,要實現(xiàn)一個多標簽頁的功能居然沒有能用的輪子,本文就來用比較low的方案 - iframe手搓一個吧2024-11-11
數(shù)組重復元素如何處理，這是在項目實戰(zhàn)中經(jīng)常遇到的，針對這個問題，下文給出詳細解決方法，希望對大家有所幫助2013-12-12
javaScript實現(xiàn)浮點數(shù)轉(zhuǎn)十六進制字符
浮點數(shù)轉(zhuǎn)十六進制的方法有很多，在本文將為大家詳細介紹下js中時如何實現(xiàn)的，下面有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所幫助2013-10-10
這篇文章主要為大家詳細介紹了前端js彈出框組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
js中通過getElementsByName訪問name集合對象的方法
下面小編就為大家?guī)硪黄猨s中通過getElementsByName訪問name集合對象的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要為大家詳細介紹了JS+HTML5實現(xiàn)圖片在線預覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
javascript設計模式 – 享元模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 享元模式,結合實例形式分析了javascript享元模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細介紹了JS實現(xiàn)進度條動態(tài)加載特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
本文主要介紹了js獲取Element元素的四種常用方法,通過介紹getElementById、getElementsByClassName、getElementsByTagName和querySelector等方法,幫助讀者了解如何通過不同的方式獲取頁面中的元素,感興趣的可以了解一下2023-08-08
我們用手機的攝像頭自拍,很容易實現(xiàn)簡單的自拍效果,如復古、黑白等等,其實我們使用web端的JavaScript也是可以實現(xiàn)的,接下來就帶領小伙伴實現(xiàn)一個魔法攝像頭,并且提供了截圖下載功能,需要的朋友可以參考下2023-08-08