之前的 HTML 不会在 history.pushState()

问题描述

我有以下由 GET /home 提供的 HTML，并使用 Javascript 劫持表单提交事件，以便将方法从 POST 更改为 DELETE。服务器侦听对 DELETE /delete 的请求，该请求实际上将 303 重定向返回到提供某些 HTML 的 GET /new。 Javascript 使用历史 API 将地址栏更新为 example.com/new，并使用 window.document.documentElement.innerHTML = text 呈现 HTML。这一切都可以找到，当我单击后退按钮时，地址栏确实会更改回以前的地址 (example.com/home)，但未呈现 HTML。为什么是这样？我已经阅读了 Mozilla docs 但我找不到任何关于不呈现 HTML 的内容，当然如果后退按钮更新地址栏，页面应该更新到那个 URL？我也试过使用 history.replaceState()，但没有用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="UTF-8" />
    <Meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="/delete" method="POST">
      <input type="submit" value="submit" />
      <input name="key" value="val" />
    </form>
  </body>
  <script>
    const form = document.querySelector("form");
    form.addEventListener("submit",async e => {
      e.preventDefault();
      console.log(new URLSearchParams(new FormData(e.currentTarget)));
      const response = await fetch(form.action,{
        body: new URLSearchParams(new FormData(e.currentTarget)),method: "DELETE",redirect: "follow",});
      const text = await response.text();
      history.pushState({},"",response.url);
      // history.replaceState({},response.url);
      window.document.documentElement.innerHTML = text;
    });
  </script>
</html>

解决方法

根据您的代码，您正在替换innerHTML，其中也包括脚本部分。请将您的脚本移至 head 标签（如果可能）或替换整个文档的 innerHTML，创建一个父 div 并替换该 div 的内容。

所以不是这个 -

window.document.documentElement.innerHTML = text;

这样做 -

documemt.getElementById('SomeDIV').innerHTML = text;

html5-history javascript

之前的 HTML 不会在 history.pushState()

问题描述

解决方法

相关问答