使用“后退”按钮时，选择菜单未恢复 [英] Select menu not being restored when Back button used

问题描述

考虑一个网页，其中包含一个带有JavaScript事件处理程序的选择菜单，该事件处理程序与菜单的onchange事件相关联，当被触发时，会使用新的查询字符串重新加载页面（使用菜单中选择的值）。

Consider a web page that has a select menu with a JavaScript event handler tied to the menu's onchange event that when fired reloads the page with a new query string (using the value selected in the menu).

问题：当用户点击返回按钮时，页面DOM将从缓存中恢复，但不是
状态选择菜单。

Issue: when the user hits the Back button, the page DOM is restored from the cache but NOT the state of the select menu.

受影响的浏览器： Firefox和Safari（使用后退/转发缓存）

Browsers affected: Firefox and Safari (which use a back/forward cache)

示例：

<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。

View this page and notice that option A is selected. Then select a different option (say option C) - the page is reloaded (with a query string, ?select1=C). Then hit the Back button - the select menu continues to show Option C as selected.

问题：有谁知道为什么选择菜单不是'恢复以及如何解决这个问题？我过去曾使用JavaScript强制页面上的表单字段与查询字符串匹配，但是这种方法存在问题（例如，FF和Safari通常不会在加载页面时执行窗口的onload事件缓存）这对我来说似乎是个黑客。

Question: Does anyone know why the select menu isn't restored and how one could solve this issue? I've used JavaScript in the past to force the form fields on a page to match the query string but there are issues with that approach (i.e., FF and Safari don't normally execute the onload event for the window when loading a page from the cache) and it seems like a hack to me.

有什么建议吗？

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

Update: It has just occurred to me that what might be going on is the following:

1. 选择选项C


2. 页面已缓存


3. JavaScript加载新网址


4. 点击后退按钮


5. 选项C已恢复，因为它是
   在
   JavaScript /页面重新加载之前缓存的内容。

1. option C is selected
2. the page is cached
3. the JavaScript loads the new URL
4. hit the back Button
5. option C is restored because it is what was cached prior to the JavaScript/page reload.

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

So I think this isn't an issue of the browser not restoring the state of the select menu, it's an issue of timing.

推荐答案

这个jQuery代码为我做了诀窍

This jQuery code did the trick for me

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

这篇关于使用“后退”按钮时，选择菜单未恢复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！