Отображение хеша (или идентификатор фрагмента) с Javascript

Question

Мой DNS-хостинг указывает домен на мой сайт (Stealth forward), поэтому домен, который отображается на моем веб-сайте, похож на www.mydomain.com, мой сайт основан на дизайне SPA (Single page) и что Доступ к страницам осуществляется с помощью идентификаторов фрагментов, таких как (#home, #aboutus и т. д.).

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

Как я могу справиться с этим с помощью Javascript? Как я могу сделать хэш (#home, #aboutus) в URL-адресе браузера?

Это легко сделать с помощью простого JS или мне нужно jQuery для этого?

Answer 1

Вот как я менеджер ссылки в SPA:

Каждый якорь тег (или кнопка на то пошло) получает явный хэш вроде этого:

<a href="#action=doSomething&param1=5&param2=10">My Title</a> 

Вы можете сгенерировать хеш, как и выше легко, как это:

var urlHash = "#" + $.param({ action:"doSomething", param1: 5, param2: 10}); 

Я не прикрепляю никаких обработчиков событий к этим якорям вообще. Это действительно простые якоря в HTML. Вместо этого я использую делегированное событие для захвата события hashchange. Один очень простой способ сделать это - использовать JQuery BBQ plugin. В этом есть множество преимуществ, в том числе тот факт, что ваши пользователи могут добавлять фрагменты в SPA или отправлять эти URL-адреса в сообщениях электронной почты, поскольку они отображаются в браузере точно так же, как и обычные URL-адреса. Они также ходят в историю, поэтому пользователи могут использовать кнопки «назад» и «вперед», как обычный веб-сайт.

Вот пример кода, который слушает hashchange события, которые будут срабатывать всякий раз, когда пользователь нажимает на выше якоря:

//Global event handler for hash change for above type of anchors 
    $(window).bind("hashchange", function (e) { 
     var action = e.getState("action"); 
     if (action === "doSomething") { 
      var param1= e.getState("param1"); 
      var param2= e.getState("param2"); 

      doSomething(param1, param2); 
     } 
     //else ignore unknown state 
    });