pushState остается на той же странице

Я пытаюсь обернуть голову, используя HTML5 pushState. Кажется, он отлично работает. Я могу добавить состояния, вернуться в свой браузер, и все выглядит нормально. Однако, когда я обновляю страницу, это приводит к 404, потому что URL-адрес, добавленный с помощью pushState, на самом деле не существует...

Я пытаюсь загрузить все из одной папки со страницей index.html, чтобы URL-адрес выглядел примерно так: http://www.server.com/app_name/<something> (app_name — это папка с файлом index.html).

Насколько я понял, hashbang считается плохим, поэтому какие URL-адреса pushState я могу/должен использовать, чтобы они оставались на той же фактической странице и позволяли мне обновляться?

И после обновления смогу ли я получить состояние?

p.s. Меня не беспокоят браузеры без включенного javascript или поддерживающие обратную совместимость. Я не хочу менять какие-либо .htaccess правила, чтобы сделать его переносимым и не требующим настройки.


html pushstate routing
person gingerlime    schedule 05.11.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Ваша проблема в том, что ваш веб-сервер пытается найти файл с именем something в папке имя_приложения. Что вам нужно сделать, так это направить все запросы к /app_name/* в ваш index.html, а затем установить соответствующее состояние приложения, используя объект местоположения DOM.

Вы не уйдете далеко, если не скажете серверу, что он должен делать. В этом вся суть History API. Если вы не хотите возиться с файлами .htaccess, вам, вероятно, следует отредактировать конфигурацию вашего веб-сервера (Apache?) с помощью mod_rewrite или sth. как это.

person Makkes    schedule 05.11.2012
comment
да, это проблема, которую я пытаюсь решить, не изменяя маршруты сервера / правила .htaccess. - person gingerlime; 06.11.2012

arrow_upward
0
arrow_downward

В итоге я отказался от pushState и вместо этого использовал BBQ плагин jQuery.

Код выглядит примерно так:

$(document).ready(function() {
  // making sure a hashchange event is triggered for refresh
  $(window).trigger('hashchange');
});

// this gets called on any page change, back button etc                                                                                                                                                                                                                                             
$(window).bind( 'hashchange', function(e) {
  // the fragment contains a hash value at the
  // end of the url, e.g. #xyz
  var url = $.param.fragment();
  // simulating a click on the appropriate link on the page
  // based on the fragment
  $('.panel a[href="#' + url + '"]').click()
});

URL-адреса на странице имеют следующий формат:

<a href="#xyz">link to xyz</a>
person gingerlime    schedule 09.11.2012