如何使用JavaScript检查URL中的#哈希?


783

我有一些jQuery / JavaScript代码,仅当#URL中有哈希()锚链接时才要运行。如何使用JavaScript检查此字符?我需要一个简单的包罗万象的测试,该测试可以检测如下URL:

  • example.com/page.html#anchor
  • example.com/page.html#anotheranchor

基本上是这样的:

if (thereIsAHashInTheUrl) {        
    do this;
} else {
    do this;
}

如果有人能指出我正确的方向,那将不胜感激。

Answers:


1403

简单:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}

42
附加:.location对象仅在当前窗口的URL上可用,您不能对任意URL(例如,存储在字符串变量中的URL)执行此操作
Gareth

64
同样,.hash和.query之类的位置属性也可在<a>元素上使用
Gareth 2010年

19
.search可用于<a>,而不适用于.query。样品jQuery的:$("<a/>").attr({ "href": "http://www.somewhere.com/a/b/c.html?qs=1#fragmenttest" })[0].hash => "#fragmenttest".search= ?qs=1。从那里,提出查询字符串提取问题,以获得字符串以外的其他东西。
2011年

1
@hitautodestruct:这个问题不是关于散列的更改,而是页面加载时是否存在哈希。
加雷斯(Gareth)

2
@Gareth是的,您是对的。刚意识到我发布的链接用于该hashchange活动,而不是活动window.location.hash。尽管IE <8不支持后者
。– hitautodestruct

333
  if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      alert (hash);
      // hash found
  } else {
      // No hash found
  }

54

输入以下内容:

<script type="text/javascript">
    if (location.href.indexOf("#") != -1) {
        // Your code in here accessing the string like this
        // location.href.substr(location.href.indexOf("#"))
    }
</script>

1
谢谢,window.location.hash仅在#后面有值时才有值。例如。//www.example.com#在检查哈希值时返回“”。
Jessy

33

如果URI不在文档的位置,则此片段将执行您想要的操作。

var url = 'example.com/page.html#anchor',
    hash = url.split('#')[1];

if (hash) {
    alert(hash)
} else {
    // do something else
}

+1表示不知道Javascript是什么:)
Dunc

2
@Dunc:JS数组基本上是对象。通过索引访问它们就像访问Object属性一样:obj['0']。在JS中,这是正确的:arr[0] === arr['0']因此,如果索引/键不存在,则返回的值是不确定的,而不是超出范围的。jsfiddle.net/web5me/Mw376
Marc

21

你有试过吗?

if (url.indexOf('#') !== -1) {
    // Url contains a #
}

url显然,您要检查的URL 在哪里)。


17
$('#myanchor').click(function(){
    window.location.hash = "myanchor"; //set hash
    return false; //disables browser anchor jump behavior
});
$(window).bind('hashchange', function () { //detect hash change
    var hash = window.location.hash.slice(1); //hash to string (= "myanchor")
    //do sth here, hell yeah!
});

这将解决问题;)


喜欢混合JS + JQ,跨浏览器和简单解决方案的答案,已经实现了这种方法。
亚瑟·库什曼



6

您可以按照以下步骤定期检查哈希值的变化,然后调用一个函数来处理哈希值。

var hash = false; 
checkHash();

function checkHash(){ 
    if(window.location.hash != hash) { 
        hash = window.location.hash; 
        processHash(hash); 
    } t=setTimeout("checkHash()",400); 
}

function processHash(hash){
    alert(hash);
}

11
这就是只在IE 6 + 7 Al以外的浏览器所必要的有包括onhashchange事件
Tokimon

@Tokimon-太好了!我不知道 但我想我们还有支持IE的那些旧版本
伊曼纽尔

1
是的,可悲的是...即使XP也不支持IE 9,甚至IE 8也不会消失:(
Tokimon 2011年

1
modernizr.com在较旧的浏览器上实现了hashchange事件(以及许多其他现代功能)
guigouz

4
根本不是推荐的代码:至少应该是:setTimeout(checkHash, 400)。另外,现代的浏览器都有此hashchange事件,因此您可以执行window.addEventListener('hashchange', function(){ … })。最后,hash即使对于一个示例,泄漏全局变量也是不推荐的做法。
汤姆汤姆

5

大多数人都知道document.location中的URL属性。如果您仅对当前页面感兴趣,那就太好了。但是问题是关于能够解析页面上的锚点而不是页面本身。

大多数人似乎想念的是,这些相同的URL属性也可用于锚定元素:

// To process anchors on click    
jQuery('a').click(function () {
   if (this.hash) {
      // Clicked anchor has a hash
   } else {
      // Clicked anchor does not have a hash
   }
});

// To process anchors without waiting for an event
jQuery('a').each(function () {
   if (this.hash) {
      // Current anchor has a hash
   } else {
      // Current anchor does not have a hash
   }
});

5
function getHash() {
  if (window.location.hash) {
    var hash = window.location.hash.substring(1);

    if (hash.length === 0) { 
      return false;
    } else { 
      return hash; 
    }
  } else { 
    return false; 
  }
}

3
应该不是“ hash.length()”而不是“ hash.length”吗?:)
Nathan Pitman

4
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);

3

上面的Partridge和Gareths评论很棒。他们应该得到一个单独的答案。显然,哈希和搜索属性可用于任何html Link对象:

<a id="test" href="foo.html?bar#quz">test</a>
<script type="text/javascript">
   alert(document.getElementById('test').search); //bar
   alert(document.getElementById('test').hash); //quz
</script>

要么

<a href="bar.html?foo" onclick="alert(this.search)">SAY FOO</a>

如果您需要在常规字符串变量上使用它,并且碰巧使用了jQuery,则应该可以使用:

var mylink = "foo.html?bar#quz";

if ($('<a href="'+mylink+'">').get(0).search=='bar')) {
    // do stuff
}

(但可能有点过头了。)


3

将其作为从任意类似URI的字符串中提取位置属性的方法而放在这里。尽管window.location instanceof Location是正确的,但是任何尝试调用Location都会告诉您这是一个非法的构造函数。你仍然可以得到喜欢的东西hashqueryprotocol通过设置字符串作为等href一个DOM锚元素,然后将分享所有的地址属性的属性window.location

最简单的方法是:

var a = document.createElement('a');
a.href = string;

string.hash;

为了方便起见,我编写了一个小库,利用该库将本机构Location造函数替换为将接收字符串并产生window.location类似对象的构造函数:Location.js


1

通常,点击优先于位置更改,因此单击之后,最好设置setTimeOut以获得更新的window.location.hash

$(".nav").click(function(){
    setTimeout(function(){
        updatedHash = location.hash
    },100);
});

或者您可以使用以下方法收听位置:

window.onhashchange = function(evt){
   updatedHash = "#" + evt.newURL.split("#")[1]
};

我编写了一个jQuery插件,该插件的功能类似于您想要执行的操作。

这是一个简单的锚路由器。


1

这是一个简单的函数,返回truefalse(具有/没有标签):

var urlToCheck = 'http://www.domain.com/#hashtag';

function hasHashtag(url) {
    return (url.indexOf("#") != -1) ? true : false;
}

// Condition
if(hasHashtag(urlToCheck)) {
    // Do something if has
}
else {
    // Do something if doesn't
}

true在这种情况下返回。

基于@ jon-skeet的评论。


0

这是测试当前页面URL的简单方法:

  function checkHash(){
      return (location.hash ? true : false);
  }

-2

有时您会获得完整的查询字符串,例如“ #anchorlink?firstname = mark”

这是我获取哈希值的脚本:

var hashId = window.location.hash;
hashId = hashId.match(/#[^?&\/]*/g);

returns -> #anchorlink

6
不可能,因为哈希值附加在查询字符串之后,并且永远不会发送到服务器。当您手动修改url时,唯一的时间哈希将出现在查询字符串之前。

1
是的,但有时人们会以这种格式发送网址。这仅仅是为了使您只能获取哈希值,而忽略其他值。:)
markg
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.