Как вы можете проверить #hash в URL, используя JavaScript?


783

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

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

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

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

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

Ответы:


1406

Просто:

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

43
Дополнительно: объект .location доступен только по URL-адресу текущего окна, вы не можете сделать это для произвольного URL-адреса (например, хранящегося в строковой переменной)
Gareth

64
Кроме того, свойства местоположения, такие как .hash и .query, также доступны для элементов <a>
Гарет,

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. Оттуда нажмите вопрос извлечения строки запроса, чтобы получить что-то, кроме строки.
Патридж

1
@hitautodestruct: этот вопрос не об изменениях хэша, а о том, присутствует ли он при загрузке страницы или нет.
Гарет

2
@ Гарет Да, ты прав. Просто понял, что ссылка, которую я разместил, была для hashchangeсобытия, а не для window.location.hash. Хотя последнее не поддерживается IE <8.
hitautodestruct

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

33

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

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

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

+1 за то, что Javascript не знает, что такое за пределами :)
Дунк

2
@Dunc: Ну, массивы JS - это в основном объекты. Доступ к их индексу, как доступ к свойству объекта следующим образом: obj['0']. В JS это верно: arr[0] === arr['0']поэтому, если индекс / ключ не существует, возвращаемое значение не определено, а не выходит за пределы. jsfiddle.net/web5me/Mw376
Марк Дитхельм,

21

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

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

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


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, кросс-браузер и простое решение уже реализовали этот подход.
Артур Кушман

13
window.location.hash 

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


Короткий и чистый, идеально подходит
Jam


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
это только необходимо в т.е. 6 + 7. Все другие браузеры включили событие onhashchange
Tokimon

@ Токимон - отлично! Я этого не знал. Но я думаю, что мы все еще должны поддерживать эти старые версии IE
Эммануэль

1
Да, к сожалению ... Даже IE 8 не скоро исчезнет, ​​так как IE 9 не поддерживается в XP :(
Tokimon

1
modernizr.com реализует событие hashchange в старых браузерах (вместе со множеством других современных функций)
guigouz

4
Это не рекомендуемый код вообще: оно должно быть по крайней мере: setTimeout(checkHash, 400). Кроме того, современные браузеры имеют hashchangeсобытие, чтобы вы могли сделать window.addEventListener('hashchange', function(){ … }). Наконец, утечка глобальной hashпеременной - еще одна не рекомендуемая практика, даже для примера.
Дядя Том

5

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

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 ()"? :)
Натан Питман


3

Замечания Партриджа и Гарета выше. Они заслуживают отдельного ответа. По-видимому, свойства хеша и поиска доступны для любого 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скажет вам, что это незаконный конструктор. Вы все еще можете добраться до таких вещей, как hash, queryи protocolт. Д., Установив вашу строку в качестве hrefсвойства элемента привязки DOM, который затем поделится всеми свойствами адреса с window.location.

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

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

string.hash;

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


1

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

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

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

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

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

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


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.


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
да, но иногда люди отправляют URL-адреса в этом формате. это просто для того, чтобы вы могли получить только значение хеша и пренебречь другими. :)
отметка
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.