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



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

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

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

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

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

219   18  

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

Партридж и Гарет комментарии выше велики. Они заслуживают отдельного ответа. По-видимому, свойства хэша и поиска доступны на любом объекте ссылки 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 и т. д., установив строку в качестве 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
    Ничего не найдено.

Добавить ответ:
Отменить.