javascript - 使用后退按钮时选择菜单未恢复

Question

考虑一个网页，该网页有一个选择菜单，其中有一个 JavaScript 事件处理程序绑定(bind)到菜单的 onchange 事件，当该事件被触发时会使用新的查询字符串(使用在菜单中选择的值)重新加载页面。

问题:当用户点击“后退”按钮时，页面 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 事件)缓存)，这对我来说就像一个 hack。

有什么建议吗？

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

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());
    });
})