Выберите меню, не восстанавливаемое при использовании кнопки "Назад"

Рассмотрим веб-страницу, в которой есть меню выбора с обработчиком событий JavaScript, связанным с событием обмена в меню, которое при запуске перезагружает страницу новой строкой запроса (используя значение, выбранное в меню).

Проблема:, когда пользователь нажимает кнопку "Назад" , страница DOM восстанавливается из кеша, но NOT состояние меню выбора.

Браузеры затронуты: Firefox и Safari (которые используют кеш обратно/вперед)

Пример:

<form action="#" method="get" name="form1">
 <select name="select1" id="select1" onchange="reloadPage();">
 <option value="A" selected>Option A</option>
 <option value="B">Option B</option>
 <option value="C">Option C</option>
 <option value="D">Option D</option> 
 </select>
</form>

Просмотрите эту страницу и обратите внимание, что выбрана опция A. Затем выберите другой вариант (например, вариант C) - страница перезагружается (с помощью строки запроса, select1 = C). Затем нажмите кнопку "Назад" - меню выбора продолжит отображение опции C, выбранной.

Вопрос: Кто-нибудь знает, почему меню выбора не восстановлено и как можно решить эту проблему? Я использовал JavaScript в прошлом, чтобы заставить поля формы на странице соответствовать строке запроса, но есть проблемы с этим подходом (например, FF и Safari обычно не запускают событие onload для окна при загрузке страницы из кеш), и это кажется мне взломом.

Любые предложения?

Обновление: Мне только пришло в голову, что может произойти следующее:

  • выбрана опция C
  • страница кэшируется
  • JavaScript загружает новый URL
  • нажмите кнопку "Назад"
  • опция C восстанавливается, поскольку она что было кэшировано до Перезагрузка JavaScript/страницы.

Итак, я думаю, что это не проблема браузера, не восстанавливающего состояние меню выбора, это проблема времени.

3 ответа

Этот код jQuery помогло

$(document).ready(function () {
 $("select").each(function () {
 $(this).val($(this).find('option[selected]').val());
 });
})


Отрывок из @frakhoffy работал у меня, но нарушил нормальное поведение в Chrome. При попадании страницы без выбранной опции выбор был пустым, даже если в выборе нет пустого параметра. Я закончил с:

$(document).ready(function () {
 $('select').each(function () {
 var select = $(this);
 var selectedValue = select.find('option[selected]').val();
 if (selectedValue) {
 select.val(selectedValue);
 } else {
 select.prop('selectedIndex', 0);
 }
 });
});


AFAIK причина, по которой он не восстанавливается, заключается в том, что DOM не тот, который был в кеше при последнем загрузке кеша. Браузер восстанавливает то, что кешированный объект находился на обратной стороне страницы. Вы должны поддерживать себя самостоятельно.

Я бы предложил поместить функцию в тело, которое всегда будет выполняться по мере анализа DOM (но у меня нет настройки окружения для тестирования этого сценария, поэтому я иду на свой детектив "он должен работать" )

licensed under cc by-sa 3.0 with attribution.