History.pushState() 导致浏览器导航
发布于2023-09-25 20:28 阅读(1009) 评论(0) 点赞(30) 收藏(2)
我试图更改页面的 URL，而不将浏览器导航到该页面并导致刷新。在用于操作浏览器历史记录的 MDN 文档中，它指出了以下内容：
假设http://mozilla.org/foo.html执行以下 JavaScript：
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
这将导致 URL 栏显示http://mozilla.org/bar.html，但不会导致浏览器加载 bar.html ，甚至不会检查 bar.html 是否存在。
这似乎也得到了 StackOverflow 上每个人的证实。但是，在我的代码中，window.history.pushState()正在导航页面。控制台甚至说得很清楚：
Navigated to http://localhost:8090/?
这是我正在使用的代码：
attemptLogin(username, password)
.then((result) => {
// navigate to Landing Page
window.history.pushState('data', 'title', '/');
})
我也不确定为什么它会添加一个问号，但它正在浏览浏览器这一事实似乎是更紧迫的问题。有谁可以提供任何见解吗？
解决方案
您提供的代码不会造成您所描述的效果。
您正在以某种方式触发该代码。您的症状表明这是由点击链接或提交表单等事件引起的。
JavaScript 正在运行，然后发生链接或表单提交的正常行为……这将导致浏览器导航到新的 URL。
您需要防止该操作的默认行为，例如：
document.querySelector("a").addEventListener("click", handler);
function handler(evt) {
evt.preventDefault();
attemptLogin(username, password)
.then((result) => {
window.history.pushState('data', 'title', '/');
});
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/531593/01b77ff45377bacf1fbc/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力