更改瀏覽器的URL，而無需加載使用JavaScript

Question

我怎麼會有一個JavaScript的行動，可能在當前頁面上有一定的影響，但也將改變URL在瀏覽器中，所以如果用戶點擊刷新或書籤的新頁面新的網址被使用？

如果後退按鈕將重新加載原始URL，這也會很好。

我想在URL中記錄JavaScript狀態。

Answer 1

如果你想讓它在不支持history.pushState和history.popState但瀏覽器，「舊」的方法是修改設置片段標識符，這不會導致頁面重新加載。

的基本思想是將window.location.hash屬性設置爲包含任何你需要的狀態信息，然後可以使用window.onhashchange event，或不支持onhashchange舊的瀏覽器（IE < 8，火狐3.6 <）的值，定期檢查哈希是否已更改（例如使用setInterval）並更新頁面。您還需要在頁面加載時檢查散列值以設置初始內容。

如果你正在使用jQuery有一個hashchange plugin將使用哪種方法瀏覽器支持。我相信也有其他庫的插件。

有一兩件事要小心與網頁上的IDS碰撞，因爲瀏覽器將滾動具有匹配ID的任何元素。

Answer 2

我強烈懷疑這是不可能的，因爲如果是這樣的話，那將是一個難以置信的安全問題。例如，我可以創建一個看起來像銀行登錄頁面的頁面，並使地址欄中的URL看起來像，就像真正的銀行一樣！

或許，如果你解釋爲什麼你想這樣做，人們也許能夠提出備選方法...

[編輯2011年：因爲我在2008年寫了這個答案，更多信息已經到了光對於一個HTML5 technique允許的URL，只要它是來自同一產地】

Answer 3

瀏覽器安全設置可以防止用戶直接修改顯示的網址。您可以想象會導致的網絡釣魚漏洞。

只有在不更改頁面的情況下更改url纔是可靠的方法，那就是使用內部鏈接或散列。例如：http://site.com/page.html變爲http://site.com/page.html#item1。這種技術通常用於hijax（AJAX +保留歷史記錄）。

做這件事時，我會往往只是用來與哈希作爲HREF的動作鏈接，然後點擊添加與使用所請求的散列值來確定，並委託行動jQuery的事件。

我希望能讓你走上正確的道路。

Answer 4

window.location.href包含當前的URL。您可以從中讀取，您可以附加到它，並且可以替換它，這可能會導致頁面重新加載。

如果聽起來像是想要在URL中記錄JavaScript狀態，以便可以將其加入書籤，而無需重新加載頁面，可以在＃之後將它追加到當前URL並且具有一段由onload觸發的JavaScript事件解析當前URL以查看它是否包含保存的狀態。

如果您使用？而不是＃，你會強制重新加載頁面，但由於你將解析加載時保存的狀態，這可能實際上不成問題;這會使前進和後退按鈕正常工作。

Answer 5

有一個雅虎的YUI組件（瀏覽器歷史記錄管理器），它可以處理這個問題：http://developer.yahoo.com/yui/history/

Answer 6

我想知道它是否會只要更多鈔票作爲頁面的父路徑是一樣的，只是新的東西附加到它。

所以像我們說的用戶在頁面：http://domain.com/site/page.html 然後，瀏覽器可以讓我做location.append = new.html 和頁面變爲：http://domain.com/site/page.htmlnew.html和瀏覽器不改變它。

或者只是允許該人更改獲取參數，所以讓我們location.get = me=1&page=1。

原來的頁面變成了http://domain.com/site/page.html?me=1&page=1，它不刷新。

＃的問題是當散列被改變時數據沒有被緩存（至少我不這麼認爲）。因此，每次加載新頁面時都是如此，而非Ajax頁面中的後退和前進按鈕能夠緩存數據，並且不會花費時間重新加載數據。

從我所看到的，雅虎的歷史事物已經加載所有的數據一次。它似乎沒有做任何Ajax請求。因此，當使用div來處理不同的超時方法時，不會爲每個歷史記錄狀態存儲該數據。

Answer 7

對於HTML 5，請使用history.pushState function。舉個例子：

<script type="text/javascript"> 
var stateObj = { foo: "bar" }; 
function change_my_url() 
{ 
    history.pushState(stateObj, "page 2", "bar.html"); 
} 
var link = document.getElementById('click'); 
link.addEventListener('click', change_my_url, false); 
</script> 

和A HREF：

<a href="#" id='click'>Click to change url to bar.html</a> 

---

如果你想改變URL而不增加後退按鈕列表中的條目，使用history.replaceState代替。

Answer 8

Facebook的照片庫使用URL中的#hash來執行此操作。下面是一些例子網址：

點擊之前 '下一步'：

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507 

點擊 '下一步' 後：

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507 

注意哈希爆炸（＃！）緊跟新URL。

Answer 9

有位置。在http://probablyinteractive.com/url-hunter

Answer 10

哈希=「文本」有一個jQuery插件http://www.asual.com/jquery/address/

我覺得這是你所需要的。

Answer 11

的jQuery有改變瀏覽器的網址，稱jQuery-pusher一個偉大的插件。

的JavaScript pushState和jQuery可以一起使用，如：

history.pushState(null, null, $(this).attr('href'));

實施例：

$('a').click(function (event) { 

    // Prevent default click action 
    event.preventDefault();  

    // Detect if pushState is available 
    if(history.pushState) { 
    history.pushState(null, null, $(this).attr('href')); 
    } 
    return false; 
}); 

僅使用的JavaScripthistory.pushState()，它更改引用鏈接器，該引用鏈接器在更改狀態後創建的XMLHttpRequest對象的HTTP標頭中使用。

實施例：

window.history.pushState("object", "Your New Title", "/new-url");

的pushState的（）方法：

pushState()三個參數：一個狀態對象，一個標題（這是目前忽略），和（任選地）一個URL。讓我們來看看這三種參數的詳細信息：

1. 狀態對象 - 國家目標是將它與pushState()創建新的歷史條目相關的JavaScript對象。只要用戶導航到新狀態，就會觸發popstate事件，並且事件的state屬性包含歷史記錄條目狀態對象的副本。

   狀態對象可以是任何可以序列化的對象。由於Firefox會將狀態對象保存到用戶的磁盤，以便在用戶重新啓動瀏覽器後可以恢復它們，所以我們在狀態對象的序列化表示上強加了640k字符的大小限制。如果您將一個其序列化表示大於此值的狀態對象傳遞給pushState()，則該方法將引發異常。如果您需要更多空間，建議您使用sessionStorage和/或localStorage。

2. 標題 - Firefox目前忽略此參數，雖然它可能在將來使用它。在這裏傳遞空字符串應該對未來對該方法的更改是安全的。或者，您可以爲您所移動的州份傳遞簡短的標題。

3. URL - 新的歷史記錄條目的URL由此參數給出。請注意，瀏覽器在調用pushState()後不會嘗試加載此URL，但它可能會嘗試稍後加載URL，例如在用戶重新啓動瀏覽器之後。新的URL不需要是絕對的;如果它是相對的，它將相對於當前的URL進行解析。新的URL必須與當前網址的來源相同;否則，pushState()會拋出異常。該參數是可選的;如果未指定，則將其設置爲文檔的當前URL。

Answer 12

我的代碼是：

//change address bar 
function setLocation(curLoc){ 
    try { 
     history.pushState(null, null, curLoc); 
     return false; 
    } catch(e) {} 
     location.hash = '#' + curLoc; 
} 

和行動：

setLocation('http://example.com/your-url-here'); 

和例子

$(document).ready(function(){ 
    $('nav li a').on('click', function(){ 
     if($(this).hasClass('active')) { 

     } else { 
      setLocation($(this).attr('href')); 
     } 
      return false; 
    }); 
}); 

這是所有:)

Answer 13

我已經受夠了成功：

location.hash="myValue"; 

它只是增加#myValue到當前的URL。如果您需要在頁面加載中觸發事件，則可以使用相同的location.hash來檢查相關的值。請記住從location.hash返回的值中刪除#，例如

var articleId = window.location.hash.replace("#","");