时间戳

首页 > 解决方案 > 在 Chrome 中，提交表单并返回后，其值会在 DOMContentLoaded 后自动填充。是否有可能听到这种变化？

javascript - 在 Chrome 中，提交表单并返回后，其值会在 DOMContentLoaded 后自动填充。是否有可能听到这种变化？

问题描述

在此处查看示例：https ://large-platinum-ethernet.glitch.me 。

使用 Google Chrome（自 2020 年 5 月起使用 v81）：

  1. 打开你的控制台。
  2. 选择“选项 0”以外的值。
  3. 点击“提交”。
  4. 在浏览器中按“返回”。
  5. 当您提交表单时，select 元素的值将更新为 select 的值。但是，如果您检查控制台，您会看到最初的值是“选项 0”，并且它会在导航之前更新为 和 之间的某个DOMContentLoaded时间window.onload。

有人知道 Chrome 何时进行此更改是否可以收听？否change或input事件被触发。我尝试setTimeout在处理程序内部使用 a DOMContentLoaded，这似乎可行，但似乎很笨拙且可能不一致。

编辑：看起来简短的回答是“不，当 Chrome 更改值时没有触发事件。” 相反，可以查看页面是否在导航事件之后加载。如果是，window.onload则可以假定由 设置的任何表单值已由浏览器设置。

标签： javascriptgoogle-chrome

解决方案

看起来 pageshow 是错误的。

performance.getEntriesByType("navigation")[0].type === 'back_forward

（弃用值）window.performance.navigation.type === 2

您还可以autocomplete=off在表单输入上使用

编辑：自 2020 年 5 月 6 日起，pageshow 在 Chrome 81
pageshow/pagehide 事件中无法检测从 bfcache 加载的情况，这是加载表单值的地方。

https://github.com/adobe/webkit/blob/master/Websites/webkit.org/blog-files/pageshow-pagehide-example.html https://developers.google.com/web/updates/2018/07 /page-lifecycle-api https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event

function pageShown(evt)
{
    if (evt.persisted)
        ; // do things to your forms
    else
        ; // no need to do anything
}

function pageHidden(evt)
{
    if (evt.persisted)
        ; // do things to your forms
    else
        ; // no need to do anything
}

window.addEventListener("pageshow", pageShown, false);
window.addEventListener("pagehide", pageHidden, false);

推荐阅读