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

668

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

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

В основном что-то похожее:

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

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

Теги:
anchor
fragment-identifier

17 ответов

1201
Лучший ответ

Простой:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}
  • 37
    Дополнительно: объект .location доступен только по URL-адресу текущего окна, вы не можете сделать это для произвольного URL-адреса (например, хранящегося в строковой переменной)
  • 61
    Кроме того, свойства местоположения, такие как .hash и .query, также доступны в элементах <a>
Показать ещё 9 комментариев
235
  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
  }
40

Введите следующее:

<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# возвращает '' при проверке хеша.
24

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

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

if (hash) {
    alert(hash)
} else {
    // do something else
}
  • 0
    +1 для Javascript, не зная, что за пределами :)
  • 2
    @Dunc: Ну, массивы JS - это в основном объекты. Доступ к ним по индексу аналогичен обращению к свойству объекта, например: obj['0'] . В JS это верно: arr[0] === arr['0'] Поэтому, если индекс / ключ не существует, возвращаемое значение не определено, а не выходит за пределы. jsfiddle.net/web5me/Mw376
18

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

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

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

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

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

  • 0
    Понравился этот ответ, потому что в JS + JQ, кросс-браузерном и простом решении уже реализован этот подход.
12
window.location.hash 

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

  • 0
    Коротко и чисто, идеально
10

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

$('a[href^="#"]')
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);
}
  • 10
    то есть только в т.е 6 + 7. Все другие браузеры включили событие onhashchange
  • 0
    @ Токимон - отлично! Я этого не знал. Но я думаю, что мы все еще должны поддерживать эти старые версии IE
Показать ещё 3 комментария
5

Большинство людей знают о свойствах URL в документе .location. Это здорово, если вас интересует только текущая страница. Но вопрос состоял в том, что он мог разбирать привязки на странице, а не на самой странице.

То, что большинство людей, похоже, пропустит, это то, что те же свойства 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
   }
});
3

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

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

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

string.hash;

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

3
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);
3
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 ()"? :)
  • 2
    Пожалуйста, не добавляйте ответы только для кода.
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
}

(но его, возможно, немного переборщило..)

1

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

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

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

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

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

Это простой якорный роутер.

0

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

-4

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

это мой script, чтобы получить значение хеша:

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

returns -> #anchorlink
  • 5
    Это невозможно, поскольку хеш добавляется после строки запроса и никогда не отправляется на сервер. Единственный временной хэш появится перед строкой запроса, когда вы изменили URL вручную.
  • 1
    да, но иногда люди отправляют URL-адреса в этом формате. это просто для того, чтобы вы могли получить только значение хеша и пренебречь другими. :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню