如何解决之前的 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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。