浏览器返回并转发并形成自动完成混乱(Browser back & forward and form autocomplete mess)

浏览器返回并转发并形成自动完成混乱(Browser back & forward and form autocomplete mess)

在我们的webapp上，页面包含一个带有一些字段的过滤器表单，一个调用jQuery AJAX的SEARCH按钮，根据过滤器表单数据加载项目。 从javascript中，我们将表单过滤器值推入URL以维护浏览器历史记录。

当我们按下BACK按钮时，页面“重新加载”，但我们看到表单值不刷新到当前值。 检查页面源代码后，我们看到html包含具有正确值属性（来自url值）的文本框元素，但文本框仍显示表单的最后一个值。 有时。 有时它有效。

我们将autocomplete =“off”添加到表单值中，这有助于“有时”进入“通常”，显示的值通常与html源相匹配。 但不总是。 我们认为浏览器缓存是坏人 - 当我们按下后退或前进按钮时，页面不会刷新，而是来自“某处”。

我们添加了一个Web配置缓存设置：

<caching> <outputCacheSettings> <outputCacheProfiles> <add name="CacheProfileNone" noStore="true" varyByParam="*" duration="0" /> </outputCacheProfiles> </outputCacheSettings> </caching>

并将该属性添加到控制器操作中

[OutputCache(CacheProfile = "CacheProfileNone")] public ActionResult Index(QueryViewModel model) {...}

但它没有帮助。 :(有时当我们按下后退按钮时会显示错误的表单值，而不是与html值匹配。表单值不是用自定义javascript函数操作的。我们在console.log输出中添加了onchange事件，并且没有看到日志消息，所以我们认为表单元素的显示值并不取决于我们的决定或代码，但是（我们认为）它取决于浏览器的东西。

我们打开新的建议，接下来要做什么，让浏览器始终加载页面并显示当前值，因为它在html源代码中定义。

欢迎任何建议！ 谢谢！

On our webapp the page contains a filter form with some field, a SEARCH button, which calls a jQuery AJAX, loads the items according to the filter form data. From javascript we pushes the form filter values to the url to maintain the browser history.

When we press the BACK button, the page "reloads", but we see that the form values do not refresh to the current values. Examining the page source, we see that the html contains the textbox element with the proper value attribute (from the url values), but the textbox still displays the last value of the form. Sometimes. Sometimes it works.

We added the autocomplete="off" to the form values, which helps a little, "sometimes" went to "usually", the displayed values usually matches the html sources. But not always. We think that the browser cache is the bad guy - when we press the back or forward button sometimes the page does not refresh, but comes from "somewhere".

We added a web config cache setting:

<caching> <outputCacheSettings> <outputCacheProfiles> <add name="CacheProfileNone" noStore="true" varyByParam="*" duration="0" /> </outputCacheProfiles> </outputCacheSettings> </caching>

and added the attribute to the controller action

[OutputCache(CacheProfile = "CacheProfileNone")] public ActionResult Index(QueryViewModel model) {...}

but it didn't help. :( Sometimes when we press the back button wrong form values are displayed, not matching with the html values. The form values are not manipulated with custom javascript functions. We added onchange event with console.log output, and sees no log messages, so we think the form element display value does not depend on our decisions or code, but (we think) it depends on the browser things.

We are open new suggestions what to do next, to get the browser to always load the page and displays the current value as it is defined in the html source.

Any suggestions are welcome! Thanks!

最满意答案

我猜测（因为你没有提供代码），但是这不符合你的想法：

从javascript中，我们将表单过滤器值推入URL以维护浏览器历史记录。

您需要调查History API replaceState()方法。

这里引用：

https://developer.mozilla.org/en-US/docs/Web/API/History_API

I'm guessing (because you provided no code), but this doesn't work the way you think:

From javascript we pushes the form filter values to the url to maintain the browser history.

You need to investigate the History API replaceState() method.

Reference here:

https://developer.mozilla.org/en-US/docs/Web/API/History_API

浏览器返回并转发并形成自动完成混乱(Browser back & forward and form autocomplete mess)

在我们的webapp上，页面包含一个带有一些字段的过滤器表单，一个调用jQuery AJAX的SEARCH按钮，根据过滤器表单数据加载项目。 从javascript中，我们将表单过滤器值推入URL以维护浏览器历史记录。

当我们按下BACK按钮时，页面“重新加载”，但我们看到表单值不刷新到当前值。 检查页面源代码后，我们看到html包含具有正确值属性（来自url值）的文本框元素，但文本框仍显示表单的最后一个值。 有时。 有时它有效。

我们将autocomplete =“off”添加到表单值中，这有助于“有时”进入“通常”，显示的值通常与html源相匹配。 但不总是。 我们认为浏览器缓存是坏人 - 当我们按下后退或前进按钮时，页面不会刷新，而是来自“某处”。

我们添加了一个Web配置缓存设置：

<caching> <outputCacheSettings> <outputCacheProfiles> <add name="CacheProfileNone" noStore="true" varyByParam="*" duration="0" /> </outputCacheProfiles> </outputCacheSettings> </caching>

并将该属性添加到控制器操作中

[OutputCache(CacheProfile = "CacheProfileNone")] public ActionResult Index(QueryViewModel model) {...}

但它没有帮助。 :(有时当我们按下后退按钮时会显示错误的表单值，而不是与html值匹配。表单值不是用自定义javascript函数操作的。我们在console.log输出中添加了onchange事件，并且没有看到日志消息，所以我们认为表单元素的显示值并不取决于我们的决定或代码，但是（我们认为）它取决于浏览器的东西。

我们打开新的建议，接下来要做什么，让浏览器始终加载页面并显示当前值，因为它在html源代码中定义。

欢迎任何建议！ 谢谢！

On our webapp the page contains a filter form with some field, a SEARCH button, which calls a jQuery AJAX, loads the items according to the filter form data. From javascript we pushes the form filter values to the url to maintain the browser history.

When we press the BACK button, the page "reloads", but we see that the form values do not refresh to the current values. Examining the page source, we see that the html contains the textbox element with the proper value attribute (from the url values), but the textbox still displays the last value of the form. Sometimes. Sometimes it works.

We added the autocomplete="off" to the form values, which helps a little, "sometimes" went to "usually", the displayed values usually matches the html sources. But not always. We think that the browser cache is the bad guy - when we press the back or forward button sometimes the page does not refresh, but comes from "somewhere".

We added a web config cache setting:

<caching> <outputCacheSettings> <outputCacheProfiles> <add name="CacheProfileNone" noStore="true" varyByParam="*" duration="0" /> </outputCacheProfiles> </outputCacheSettings> </caching>

and added the attribute to the controller action

[OutputCache(CacheProfile = "CacheProfileNone")] public ActionResult Index(QueryViewModel model) {...}

but it didn't help. :( Sometimes when we press the back button wrong form values are displayed, not matching with the html values. The form values are not manipulated with custom javascript functions. We added onchange event with console.log output, and sees no log messages, so we think the form element display value does not depend on our decisions or code, but (we think) it depends on the browser things.

We are open new suggestions what to do next, to get the browser to always load the page and displays the current value as it is defined in the html source.

Any suggestions are welcome! Thanks!

最满意答案

我猜测（因为你没有提供代码），但是这不符合你的想法：

从javascript中，我们将表单过滤器值推入URL以维护浏览器历史记录。

您需要调查History API replaceState()方法。

这里引用：

https://developer.mozilla.org/en-US/docs/Web/API/History_API

I'm guessing (because you provided no code), but this doesn't work the way you think:

From javascript we pushes the form filter values to the url to maintain the browser history.

You need to investigate the History API replaceState() method.

Reference here:

https://developer.mozilla.org/en-US/docs/Web/API/History_API