Выполнить действие на основе идентификатора фрагмента в jQuery

#jquery #fragment-identifier

#jquery #фрагмент-идентификатор

Вопрос:

У меня на моем сайте есть модальное окно CSS, которое открывается нажатием на привязку, которая выглядит следующим образом:

 <a href="#modal-box">Click here to open modal box</a>
  

Как только пользователи нажмут на это, откроется модальное окно, и они окажутся в:
http://example.com/#modal-box

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

Используя jquery, есть ли способ получить идентификатор фрагмента, в котором находится пользователь, и затем предпринять действие на основе этого?

Ответ №1:

Если вы хотите сделать это правильно (например, поддержка кнопки «Назад»), тогда вам нужно перехватить событие hashchange и действовать в соответствии с этим, это событие запускается современными браузерами при изменении фрагмента URL. Однако не все браузеры поддерживают hashchange, поэтому вам придется обойти это. Вам лучше использовать предварительно созданное решение, такое как:

Базовый плагин hashchange, вероятно, ваш лучший выбор, если вы не создаете приложение на JavaScript со сложной маршрутизацией и обработкой аргументов.

Вы также могли бы смотреть на location.hash все время. Но тогда вам пришлось бы найти соответствующую ссылку и имитировать щелчок по ней, чтобы заставить браузер работать должным образом. Как только вы начнете делать подобные вещи, вам, вероятно, лучше использовать один из вышеупомянутых плагинов / фреймворков и какую-то формальную систему маршрутизации.

Комментарии:

1. Самый превосходный ответ, спасибо. Бен Алман, похоже, гуру в области хэшей. Поди разберись.

Ответ №2:

Вероятно, вы могли бы сделать это с помощью jQuery, но вы также можете просто использовать встроенное свойство JavaScript: location.hash дает вам #modal-box .