предыдущий HTML не будет отображаться с кнопкой «Назад» после history.pushState()

У меня есть приведенный ниже HTML-код, который обслуживается из GET /home и использует Javascript для перехвата события отправки формы, чтобы изменить метод с POST на DELETE. Сервер прослушивает запросы к DELETE /delete, которые фактически возвращают перенаправление 303 на GET /new, которое обслуживает некоторый HTML. Javascript обновляет адресную строку до example.com/new, используя API истории, и отображает HTML, используя window.document.documentElement.innerHTML = text. Все это работает, и когда я нажимаю кнопку «Назад», адресная строка ДЕЙСТВИТЕЛЬНО меняется на предыдущий адрес (example.com/home), но HTML не отображается. Почему это? Я прочитал документацию Mozilla, но не могу найти что-нибудь о том, чтобы не отображать 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>

javascript html5-history
person Max888    schedule 15.05.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В соответствии с вашим кодом вы заменяете innerHTML, который также включает часть скрипта. Пожалуйста, переместите свой скрипт в тег заголовка (если это возможно) или вместо замены innerHTML всего документа создайте родительский div и замените содержимое этого div.

Так что вместо этого -

window.document.documentElement.innerHTML = text;

Сделай это -

documemt.getElementById('SomeDIV').innerHTML = text;
person Ayush Sharma    schedule 15.05.2021
comment
Помещение сценария в ‹head› не работает, потому что DOM не будет загружен, поэтому при запуске сценария он не найдет элемент формы. Я не могу обернуть содержимое в div, лучшим решением, похоже, было заменить document.body вместо этого, но это также, похоже, разрушило скрипт. - person Max888; 16.05.2021
comment
Я попытался использовать window.onload = () => { myscript } и поместить сценарий в голову. Теперь скрипт успешно запускается и находит форму, однако исходный вопрос не решен — предыдущая страница не отображается при переходе с помощью кнопки «Назад». - person Max888; 16.05.2021