检测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中的返回按钮/哈希变化

回答

相关问题