866

我有一些 jQuery/JavaScript 代码，我只想#在 URL 中有哈希 () 锚链接时运行。如何使用 JavaScript 检查这个字符？我需要一个简单的包罗万象的测试来检测这样的 URL：

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

基本上是这样的：

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

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

4

20 回答 20

1556

位置哈希的简单使用：

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}
于 2008-11-18T11:37:00.617 回答
370 
  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
  }
于 2011-07-13T16:46:34.490 回答
58

放置以下内容：

<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>
于 2008-11-18T11:41:10.123 回答
40

如果 URI 不是文档的位置，则此代码段将执行您想要的操作。

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

if (hash) {
    alert(hash)
} else {
    // do something else
}
于 2012-03-08T10:42:21.000 回答
27

你试过这个吗？

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

url（显然，您要检查的 URL在哪里。）

于 2008-11-18T11:37:01.270 回答
18 
$('#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!
});

这将解决问题;）

于 2011-08-31T13:44:31.440 回答
14 
window.location.hash

将返回哈希标识符

于 2013-04-27T18:31:45.743 回答
10

...或者有一个 jquery 选择器：

$('a[href^="#"]')
于 2012-04-19T13:18:42.103 回答
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);
}
于 2010-07-05T22:23:38.627 回答
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; 
  }
}
于 2013-06-07T23:58:31.510 回答
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
   }
});
于 2013-09-05T17:32:24.833 回答
4 
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);
于 2013-07-06T10:37:35.383 回答
3

上面的 Partridge 和 Gareths 的评论很棒。他们应该得到一个单独的答案。显然，任何 html Link 对象都可以使用 hash 和 search 属性：

<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
}

（但它可能有点过头了..）

于 2012-02-20T22:42:13.173 回答
3

在这里将其作为一种从任意类似 URI 的字符串中抽象位置属性的方法。虽然window.location instanceof Location是真的，但任何调用尝试Location都会告诉你它是一个非法的构造函数。您仍然可以通过将字符串设置为DOM 锚元素的属性来获得诸如hash,query等内容，然后它将与.protocolhrefwindow.location

最简单的方法是：

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

string.hash;

为方便起见，我编写了一个小库，利用它来替换原生Location构造函数，它可以接受字符串并生成window.location类似对象：Location.js

于 2013-09-10T13:58:13.893 回答
1

通常点击先于位置更改，因此在点击后设置TimeOut 以获取更新的window.location.hash 是一个好主意

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

或者您可以通过以下方式收听位置：

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

我写了一个jQuery 插件，它可以做你想做的事情。

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

于 2012-06-20T18:18:19.180 回答
1

这是一个返回true或false（有/没有标签）的简单函数：

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 的评论。

于 2015-11-29T11:22:07.160 回答
1

您可以使用现代 JS解析 url ：

var my_url = new URL('http://www.google.sk/foo?boo=123#baz');

my_url.hash; // outputs "#baz"
my_url.pathname; // outputs "/moo"
​my_url.protocol; // "http:"
​my_url.search; // outputs "?doo=123"

没有哈希的 url 将返回空字符串。

于 2020-10-13T11:32:50.127 回答
0

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

  function checkHash(){
      return (location.hash ? true : false);
  }
于 2018-07-18T09:31:01.870 回答
0

我注意到所有这些答案都主要检查 window.location.hash 并且难以编写测试。

 const hasHash = string => string.includes('#')

您还可以从 url 中删除哈希，如下所示：

const removeHash = string => {
 const [url] = string.split('#')
 return url
}

最后，您可以将逻辑组合在一起：

if(hasHash(url)) {
 url = removeHash(url)
}
于 2021-04-15T01:17:23.103 回答
-2

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

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

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

returns -> #anchorlink
于 2014-10-27T08:45:24.113 回答