使用"后退"按钮时,选择菜单未恢复

Question

考虑一个具有选择菜单的网页,该菜单包含与菜单的onchange事件相关联的JavaScript事件处理程序,该事件在被触发时使用新的查询字符串重新加载页面(使用菜单中选择的值).

问题:当用户点击"返回"按钮时,页面DOM将从缓存中恢复,但不会退出选择菜单的状态.

受影响的浏览器: Firefox和Safari(使用后退/前向缓存)

示例:

<script language="javascript" type="text/javascript">
function reloadPage() {
    var menu = document.getElementById("select1");
    var val = menu.options[menu.selectedIndex].value;
    window.location.href = 'test.html?select1=' + val;
} 
</script>
<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事件缓存)这对我来说似乎是一个黑客攻击.

有什么建议？

更新:我刚刚想到可能发生的事情如下:

1. 选项C被选中
2. 页面被缓存
3. JavaScript加载新的URL
4. 按下后面的按钮
5. 选项C已恢复,因为它是在重新加载JavaScript /页面之前缓存的内容.

所以我认为这不是浏览器没有恢复选择菜单状态的问题,这是一个时间问题.

Answer 1

这个jQuery代码为我做了诀窍

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

Answer 2

来自@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);
    }
  });
});

Answer 3

这就是表单中的默认情况（不仅仅是选择）：浏览器将保留最后一个值。除非您想使用多个浏览器调试该代码，否则我不会添加任何 JavaScript 代码来改变此行为。

在大多数（所有？）现代浏览器中解决问题的最简单的解决方案是autocomplete="off"在<form>标签中使用。

编辑：见答案/sf/answers/1009520641/

Answer 4

据我所知，它没有被恢复的原因是 DOM 不是上次缓存加载时缓存中的那个。浏览器恢复页面返回时缓存的对象。你必须自己维持状态。

我建议在主体中放置一个函数，该函数将始终在解析 DOM 时运行（但我没有示例环境设置来测试此场景，因此我将继续使用“它应该可以工作”检测器）

<script type="javascript">
  function fix_selects(){
    //do something here to ensure that the select is setup how you want. 
    //Maybe using a window location hash?
  }
  fix_selects();
</script>