檢測URL中的返回按鈕/哈希變化

我剛剛在http://ritter.vg上設置了我的新主頁。我使用jQuery，但非常簡單。
它使用AJAX加載所有頁面 - 我已設置爲允許通過檢測URL中的散列來添加書籤。檢測URL中的返回按鈕/哈希變化

//general functions 
function getUrl(u) { 
     return u + '.html'; 
} 
function loadURL(u) { 
     $.get(getUrl(u), function(r){ 
       $('#main').html(r); 
      } 
    ); 
} 
//allows bookmarking 
var hash = new String(document.location).indexOf("#"); 
if(hash > 0) 
{ 
     page = new String(document.location).substring(hash + 1); 
     if(page.length > 1) 
     loadURL(page); 
     else 
     loadURL('news'); 
} 
else 
     loadURL('news');

但我無法得到後退和前進按鈕的工作。

有沒有辦法檢測後退按鈕何時被按下（或檢測何時散列改變）而不使用setInterval循環？當我用0.2秒和1秒的超時時間測試它時，它與我的CPU掛鉤。

來源

2008-10-06 Tom Ritter

而不是針對HTML4`hashchange`事件;現在有超級種子的HTML5 History API。 [這是一個很好的參考]（https://github.com/balupton/history.js/wiki/Intelligent-State-Handling）。 – balupton 2011-03-07 05:38:47

改爲使用jQuery hashchange event插件。關於您的完整ajax導航，請嘗試使用SEO friendly ajax。否則，您的網頁在JavaScript限制的瀏覽器中不顯示任何內容。

來源

2008-10-06 02:46:02 Komang

歷史插件工作，並感謝您的搜索引擎優化鏈接。 – 2008-10-06 03:37:17

時下您可以使用[HTML5 API]（http://stackoverflow.com/a/13747338/24874）。 – 2013-04-02 17:15:29

jQuery BBQ (Back Button & Query Library)

A-基於散列高品質的瀏覽器插件的歷史和非常up-to-date (Jan 26, 2010) as of this writing (jQuery 1.4.1)。

來源

2010-02-03 16:42:31 micahwittman

另一個很好的實現是balupton的jQuery History，如果它受瀏覽器支持，它將使用本機onhashchange事件，如果不是，它將適當地爲瀏覽器使用iframe或interval，以確保所有預期的功能都被成功模擬。它還提供了一個很好的界面來綁定到某些狀態。

另一個值得注意的項目是jQuery Ajaxy，它幾乎是jQuery歷史記錄添加ajax的擴展。就像你開始使用哈希時使用ajax一樣，它會得到quite complicated！

來源

2010-08-28 17:47:01 balupton

您的第一個鏈接是404 – Phrogz 2012-06-06 17:20:40

HTML5包含了比使用hashchange狀態管理API - https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history更好的解決方案 - 它們允許您更改頁面的URL，而無需使用散列值！

儘管HTML5狀態功能僅適用於HTML5瀏覽器。因此，您可能想要使用類似History.js這樣的向HTML4瀏覽器提供向後兼容體驗（通過散列，但仍支持數據和標題以及replaceState功能）的東西。

你可以閱讀更多關於它在這裏： https://github.com/browserstate/History.js

來源

2011-01-30 14:02:17 balupton

怎麼做，如果你想使用它，然後將其粘貼在一些地方，並設置你的處理程序代碼在locationHashChanged（QS），其中評論下面，然後每次加載ajax請求時都調用changeHashValue（hashQuery）。它不是一個快速修復的答案，也沒有，所以你需要考慮它並通過合理的hashQuery參數（即a = 1 & b = 2）來更改哈希值（hashQuery），然後滿足所述參數的每個組合在locationHashChanged（QS）回調...

// Add code below ... 
function locationHashChanged(qs) 
{ 
    var q = parseQs(qs); 
    // ADD SOME CODE HERE TO LOAD YOUR PAGE ELEMS AS PER q !! 
    // YOU SHOULD CATER FOR EACH hashQuery ATTRS COMBINATION 
    // THAT IS PASSED TO changeHashValue(hashQuery) 
} 

// CALL THIS FROM YOUR AJAX LOAD CODE EACH LOAD ... 
function changeHashValue(hashQuery) 
{ 
    stopHashListener(); 
    hashValue  = hashQuery; 
    location.hash = hashQuery; 
    startHashListener(); 
} 

// AND DONT WORRY ABOUT ANYTHING BELOW ... 
function checkIfHashChanged() 
{ 
    var hashQuery = getHashQuery(); 
    if (hashQuery == hashValue) 
    return; 
    hashValue = hashQuery; 
    locationHashChanged(hashQuery); 
} 

function parseQs(qs) 
{ 
    var q = {}; 
    var pairs = qs.split('&'); 
    for (var idx in pairs) { 
    var arg = pairs[idx].split('='); 
    q[arg[0]] = arg[1]; 
    } 
    return q; 
} 

function startHashListener() 
{ 
    hashListener = setInterval(checkIfHashChanged, 1000); 
} 

function stopHashListener() 
{ 
    if (hashListener != null) 
    clearInterval(hashListener); 
    hashListener = null; 
} 

function getHashQuery() 
{ 
    return location.hash.replace(/^#/, ''); 
} 

var hashListener = null; 
var hashValue = '';//getHashQuery(); 
startHashListener();

來源

2011-04-18 19:53:07

儘量簡單輕便& LIB PathJS。

簡單的例子：

Path.map("#/page").to(function(){ 
    alert('page!'); 
});

來源

2012-04-19 18:16:31

這裏的答案都是很老。

在HTML5世界中，您應該使用onpopstate事件。

window.onpopstate = function(event) 
{ 
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
};

或者：

window.addEventListener('popstate', function(event) 
{ 
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
});

後者片斷允許多個事件處理程序存在，而前者將取代現有的處理程序可能會導致難以發現的錯誤。

來源

2012-12-06 15:49:55

檢測URL中的返回按鈕/哈希變化

回答

相關問題