Как с помощью JavaScript проверить наличие хэша в URL-адресе?

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

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

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

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
818
0
671 442
19
Перейти к ответу Данный вопрос помечен как решенный

Ответы 19

Ответ принят как подходящий

Простой:

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

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

Gareth 18.11.2008 14:39

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

Gareth 30.07.2010 17:52
.search доступен на <a>, но не на .query. Пример jQuery: $("<a/>").attr({ "href": "http://www.somewhere.com/a/b/c.html?qs=1#fragmenttest" })[0]. .hash => "#fragmenttest" и .search = ?qs=1. Оттуда нажмите вопрос извлечения строки запроса, чтобы получить что-то, кроме строки.
patridge 29.07.2011 20:48

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

Gareth 18.05.2013 03:32

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

hitautodestruct 19.05.2013 10:37

@Gareth, а что делать, если <a> ссылается на недопустимый URL со странным синтаксисом?

Pacerier 11.10.2014 19:51

У меня это не сработало для URL-адресов, у которых есть #anchor после дополнительного / (например, example.com/page/#anchor). Вот как Wordpress обрабатывает хеши. Вместо этого я использовал одно из других решений на этой странице, которое сработало: location.href.indexOf("#") != -1. У меня не было возможности тщательно протестировать это, но я предполагаю, что дополнительный / перед #anchor, поэтому решение с использованием window.location.hash у меня не сработало. Я пробовал это только с помощью Chrome 47.

Mark Rummel 12.01.2016 19:51

Один из способов его использования - проверить, находится ли пользователь в корне домена. if (window.location.hash) { // Fragment exists } else { // Fragment doesn't exist console.info('Welcome to ROOT'); }

lowtechsun 28.05.2016 17:17

Если вы проверяете, что хеш равен значению, обязательно используйте что-то вроде if (window.location.hash == '#hashnamehere'). Я совершил ошибку, проверив его без физического хеша #.

Liam McArthur 10.03.2017 16:59

Есть ли здесь риск внедрения кода? Или автоматически обрабатывает javascript, избегая всего в хэше

Albert Renshaw 26.03.2019 19:26

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

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

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

Ставим следующее:

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

Спасибо, window.location.hash имеет значение, только если после # стоит значение. Например. //www.example.com# возвращает '' при проверке хеша.

Jessy 16.02.2017 15:42

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

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

это необходимо только в случае, например, 6 + 7. Все остальные браузеры включили событие onhashchange.

Tokimon 25.03.2011 15:44

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

Emmanuel 26.03.2011 11:57

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

Tokimon 06.04.2011 02:52
modernizr.com реализует событие hashchange в старых браузерах (вместе с множеством других современных функций)
guigouz 27.11.2011 19:41

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

Oncle Tom 11.12.2013 03:04
  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
  }
$('#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, кроссбраузерность и простое решение уже реализовали этот подход.

Arthur Kushman 07.08.2016 19:27

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

(но это может быть немного переборщить ..)

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

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

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

+1 за Javascript, не зная, что выходит за границы :)

Dunc 20.08.2014 00:04

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

Marc Diethelm 30.10.2014 14:48

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

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

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

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

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

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

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

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

window.location.hash 

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

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

Jam 06.12.2017 13:32
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; 
  }
}

Разве это не должно быть hash.length вместо hash.length ()? :)

Nathan Pitman 19.12.2013 02:20
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);

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

Вбрасываем это здесь как метод абстрагирования свойств местоположения от произвольных строк, подобных 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

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

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

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

returns -> #anchorlink

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

user1537415 06.12.2014 21:52

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

markg 27.07.2015 11:43

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

Вы можете анализировать URL-адреса с помощью современный JS:

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-адреса без хеша вернут пустую строку.

Другие вопросы по теме