window.history.pushState 刷新浏览器

php javascript html browser pushstate

2022-08-30 11:21:27

我正在研究一些javascript代码，并用于加载新页面，而不是使用标签。我的代码（工作正常）看起来像这样。window.History.pushStateHTMLhref

window.History.pushState({urlPath:'/page1'},"",'/page1')

奇怪的是，这失败了，即重新加载浏览器

window.History.pushState({urlPath:'/page2.php'},"",'/page2.php')

但这有效，内容已更新，浏览器未刷新！（请注意，URL是绝对的，而不是相对的）

window.History.pushState({urlPath:'www.domain.com/page2.php'},"",'www.domain.com/page2.php')

的文档说第三个参数URL可以是绝对的，也可以是相对的 -window.History.pushState

URL — 新历史记录条目的 URL 由此参数给出。请注意，浏览器在调用 pushState（）后不会尝试加载此 URL，但可能会在以后尝试加载 URL，例如在用户重新启动浏览器之后。新的URL不需要是绝对的;如果它是相对的，则相对于当前 URL 进行解析。新 URL 必须与当前 URL 具有相同的来源;否则，pushState（）将引发异常。此参数是可选的;如果未指定，则将其设置为文档的当前 URL。

绝对URL似乎有效，但相对URL似乎不起作用。为什么会发生这种情况？

答案 1

简短的回答是（不是，这会引发异常，该部分是可选的）永远不会做你建议的事情。history.pushStateHistory.pushStatewindow

如果页面正在刷新，则是由您正在执行的其他操作引起的（例如，您可能正在运行在地址栏更改时转到新位置的代码）。

history.pushState({urlPath:'/page2.php'},"",'/page2.php')工作方式与我和我的同事在最新版本的Chrome，IE和Firefox中应该的工作方式完全相同。

事实上，你可以把任何你喜欢的东西放到函数中：.history.pushState({}, '', 'So long and thanks for all the fish.not a real file')

如果您发布更多代码（特别注意附近和任何地方使用的代码），那么我们将非常乐意帮助您找出此问题的确切来源。history.pushStatedocument.location

如果您发布更多代码，我会更新此答案（我收藏了您的问题）:)。

答案 2

正如其他人所建议的那样，你没有清楚地解释你的问题，你试图做什么，或者你对这个功能实际上应该做什么的期望是什么。

如果我理解正确，那么您期望此函数为您刷新页面（您实际上使用术语“重新加载浏览器”）。

但此功能不用于重新加载浏览器。

所有功能的作用是将新的“状态”添加（推送）到浏览器历史记录中，以便将来用户将能够返回到网页现在所处的状态。

通常，这与 AJAX 调用（仅刷新页面的一部分）结合使用。

例如，如果用户在其中一个搜索框中搜索“CATS”，并且搜索结果（可能是可爱的猫的图片）通过AJAX加载回页面的右下角 - 那么您的页面状态将不会更改。换句话说，在不久的将来，当用户决定要回到搜索“CATS”时，他将无法这样做，因为该州在他的历史中不存在。他只能点击回到您的空白搜索框。

因此，需要该功能

history.pushState({},"Results for `Cats`",'url.html?s=cats');

它旨在作为一种允许程序员在用户历史记录中专门定义其搜索的方法。这就是它打算要做的。

当函数正常工作时，您唯一应该看到的是浏览器地址栏中的地址更改为您在URL中指定的任何地址。

如果你已经理解了这一点，那么很抱歉这个很长的序言。但从你提出问题的方式来看，这听起来是你没有的。

顺便说一句，我还发现文档中描述函数的方式与它在现实中的工作方式之间存在一些矛盾。我发现使用空白或空值作为参数不是一个好主意。

看看我对这个SO问题的答案。因此，我建议在第二个参数中放置描述。从内存中，这是用户在下拉列表中看到的描述，当他单击并按住鼠标放在“后退”按钮上时。