Question

我正在尝试使用jQuery来响应＃后面的url中的更改。我做了一些搜索，但我认为我没有使用正确的搜索字词。

要明确的是，我希望能够为这样的页面提供外部链接：

<a href="example.com/foo/#home">home</a>

并包含内部链接以动态更改页面上的内容：

<a href="#site-index">site index</a>

Gmail会这样做。例如，我可以直接将您链接到您发送的邮箱：https://mail.google.com/mail/u/0/#sent

感谢。

Answer 1

这就是你要找的东西：

http://haineault.com/blog/37/

(function(){
  anchor = document.location.hash, handlers = [];

  jQuery.extend({
    anchorHandler: {
      add: function(regexp, callback) {
        if (typeof(regexp) == 'object') {
          jQuery.map(regexp, function(arg){
            args = {r: arg[0], cb: arg[1]};});}
        else  args = {r: regexp, cb: callback};
        handlers.push(args);
        return jQuery.anchorHandler;
      }
    }
  })(document).ready(function(){
    jQuery.map(handlers, function(handler){
      match = anchor.match(handler.r) && anchor.match(handler.r)[0] || false;
      if (match) handler.cb.apply(this, [match, (anchor || false)]);});});
})();

添加这样的触发器：

$.anchorHandler
  .add(/\#ch\-cheatsheet/,    h.comment.showCheatsheet)
  .add(/\#comment\-compose/,  h.comment.showCompose)
  .add(/\#comment\-\d+/,      h.comment.focus);

Answer 2

查看HTML 5 hashchange事件和jQuery Back Button & Query plugin，以便为旧浏览器提供该事件。

Answer 3

我相信你想要的词是碎片。

Answer 4

我认为jQuery History plugin完全符合您的要求。

Answer 5

这是一个非常简单的例子：

if (location.hash != "")
{
    Location.hash.replace(
        new RegExp( "([^#?=&]+)(=([^&]*))?", "g" ),
            function( $0, $1, $2, $3 ){
                eval($1 + "='" + $3 + "'");
             });
}

这是我过去使用的一种方法（以一种hacky方式）来评估所有变量，这将转变如下：

#id=1&blah=cheese

使用正确的值进入id和blah的javascript变量，快速简单：）

Answer 6

JQuery没有响应URI中的哈希更改的事件。文档准备好后，您检查哈希并适当地更改页面。您可以截取哈希锚点击事件并在此后进行适当的响应。或者，您可以通过检查计时器上的window.location.hash来创建合成的“哈希更改”事件。

Javascript响应url的＃部分中的更改

6 个答案: