Как отслеживать изменения location.hash?

Question

[Alexey Yankiv]

Добрый день.
Наметилась такая проблема:

1. Есть следующий html-код:

Обвертка для вывода модального окна:

<div class="modal" id="auto1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">

 <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">{modalLabel}</h3>
</div>
<div class="modal-body">
<p>
{modalContent}
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Закрыть</button>
</div>
</div>

И ссылка:

<a id="bhmenu1" class="bhmenu" href="#auto1" data-toggle="modal">
    Автоматизация документооборота
</a>

В данном случае, при нажатии на ссылку хеш передается в класс обвертки вывода модального окна как id
Проблема в том, что ссылок может быть несколько то есть:

href="auto1"
href="auto2"

И так далее.
Не хочется плодить сущности и для каждой ссылки делать свою обвертку - неправильно это.

Внимание вопрос: Как можно отловить изменение хеш-параметра который передается по ссылке и изменить id

Погуглив, толкового решения по отслеживанию изменения document.location.hash я не нашел, прошу пнуть в верном направлении.

Comments

[Mikhail Osher]

Активируйте через javascript, а не разметку.

Answer 1

[Сергей Мельников]

window.addEventListener('hashchange', hashchange);

function hashchange(){ 
  var hash = location.hash;
  /* do something */
}

Comments

[Mikhail Osher]

Третим параметром addEventListener надо передавать false.

[Alexey Yankiv]

<div class="modal" onclick="hashchange()"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
	<script type="text/javascript">
		window.addEventListener('hashchange', hashchange, false);
		function hashchange(){
		  var hash = location.hash;
			if (hash == '#1c2')
			{document.getElementById('id').className = '1c2' }
		}
	</script>
 <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">{modalLabel}</h3>
</div>
<div class="modal-body">
<p>
{modalContent}
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Закрыть</button>
</div>
</div>

рано обрадовался..не работает...

[Сергей Мельников]

@Miraage если вы почитаете доки, вы будете знать, что в данном случае это не обязательно

[Сергей Мельников]

@netaspid у меня все работает, вы что то делаете не так
jsfiddle.net/w8vg3

[Сергей Мельников]

@netaspid вот на бутстрапе
jsfiddle.net/28mxu

Answer 2

[Alexey Yankiv]

туплю. можно с примером?

Answer 3

[frees2]

без хеша вроде давно пашет

$videoIdprint='<span onclick="ytplayer.loadVideoById(\''.$videoId.'\', 0);history.pushState(null, null, \''.$videoId.'\');return false">..........

Comments

[aen]

Только про старые браузеры помните. History API не везде работает.

[frees2]

раньше браузеры стояли а сейчас сами просят их обновить

[Alexey Yankiv]

Спасибо! Все получилось!