Как вы можете проверить #hash в URL-адресе с помощью JavaScript?

У меня есть код jQuery JavaScript, который я хочу запустить только тогда, когда в URL есть привязка хэша ( # ). Как вы можете проверить этот символ с помощью JavaScript? Мне нужен простой тест catch-all, который будет обнаруживать такие URL-адреса:

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

в основном что-то вроде:

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

Если бы кто-нибудь мог указать мне в правильном направлении, это было бы значительно ценится.

18 ответов


просто:

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

  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
  }

пишем следующее:

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

Если URI не является местоположением документа, этот фрагмент будет делать то, что вы хотите.

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

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

вы пробовали это?

if (url.indexOf("#") != -1)
{
}

(где url это URL, который вы хотите проверить, очевидно.)


$('#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!
});

Это решит проблему ;)


window.location.hash 

вернет хэш-идентификатор


...или есть селектор jquery:

$('a[href^="#"]')

вот что вы можете сделать, чтобы периодически проверять изменение хэша, а затем вызывать функцию для обработки хэш-значения.

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

большинство людей знают о свойствах 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
   }
});

куропатка и комментарии Gareths выше велики. Они заслуживают отдельного ответа. По-видимому, свойства хэша и поиска доступны на любом объекте ссылки html:

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

(но, может быть, немного перестарался .. )


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

бросая это здесь как метод для абстрагирования свойств местоположения из произвольных URI-подобных строк. Хотя window.location instanceof Location истинно, любая попытка вызвать Location скажет вам, что это незаконный конструктор. Вы все еще можете добраться до таких вещей, как hash, query, protocol etc, установив строку как href свойство элемента привязки DOM, который затем будет делиться всеми свойствами адреса с window.location.

простой способ сделать это есть:

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

string.hash;

для удобства я написал небольшую библиотеку, которая использует это, чтобы заменить родной Location конструктор с одним, который будет принимать строки и производить window.locationобъекты: расположение.js


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

обычно клики идут первыми, чем изменения местоположения, поэтому после щелчка-хорошая идея для setTimeOut чтобы получить обновленное окно.местоположение.хэш

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

или вы можете слушать расположением:

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

Я написал плагин jQuery что делает что-то вроде что ты хочешь сделать.

это простой якорный маршрутизатор.


вот простая функция, которая возвращает 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.


Это простой способ проверить это для текущей страницы URL:

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

иногда вы получаете полную строку запроса, такую как " #anchorlink?имя=Марк"

Это мой скрипт для получения хэш-значения:

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

returns -> #anchorlink