window.history.pushState 刷新浏览器

Posted 2023-02-21

【中文标题】window.history.pushState 刷新浏览器

【英文标题】：window.history.pushState refreshing the browser

【发布时间】：2014-08-10 00:55:53

【问题描述】：

我正在编写一些 javascript 代码，并使用 window.History.pushState 加载新的 html 页面，而不是使用 href 标记。我的代码（工作正常）看起来像这样。

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')

window.History.pushState 的documentation 表示第三个参数 URL 可以是绝对的或相对的 -

URL — 新历史条目的 URL 由该参数给出。笔记 调用后浏览器不会尝试加载此 URL pushState()，但它可能会尝试稍后加载 URL，例如 用户重新启动浏览器后。新的 URL 不需要 绝对;如果是相对的，则相对于当前 URL 进行解析。 新 URL 必须与当前 URL 同源；否则， pushState() 将抛出异常。该参数是可选的；如果 它没有被指定，它被设置为文档的当前 URL。

绝对 URL 似乎有效，但相对 URL 似乎无效。为什么会这样？

【问题讨论】：

所有浏览器都会出现这种情况吗？我经常使用history.pushState 的相对路径（未来的读者，请注意history 中的小写h）（并且只是在Firebug 中尝试过）而不会导致重新加载。您还使用了哪些其他代码（因为 history.pushState 不加载任何内容，仅更新历史记录和地址栏）？

这发生在 chrome 和 firefox 中。我在 chrome 的控制台面板中对此进行了测试，因此没有其他可能导致任何问题的代码。此问题仅在少数 URL 中可见。这是否与重定向规则有关（尽管文档说相对路径被解析为绝对路径，因此它应该同样影响绝对和相对 URL，但事实并非如此）？

请将您的代码放在某个地方，以便我们查看。正如@MrN00b 建议的那样，“历史”的小写“h”很重要。以下内容对我有用，无需刷新页面：$('#buttonID').on('click', function() window.history.pushState(urlPath:'/page1',"",'/page1'));

您放入控制台的确切代码是什么？显然window.History.pushState(urlPath:'/page2.php',"",'/page2.php')会抛出异常（因为代码应该是history.pushState(...)）。那行代码本身不会导致刷新 - 它会更改地址栏中的文本并将项目添加到历史记录中，仅此而已。重定向规则通常是服务器端的，因此无关紧要（服务器不知道客户端代码）。

【参考方案1】：

简短的回答是history.pushState（不是History.pushState，它会抛出异常，window 部分是可选的）永远不会按照您的建议行事。

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

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.pushState 附近的代码以及使用document.location 的任何地方），那么我们将非常乐意帮助您找出问题的根源。

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

【讨论】：

为什么你可以传递任何字符串来代替 url？ popState 发生时不会出错吗？

【参考方案2】：

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

如果我理解正确，那么您期望此功能为您刷新页面（您实际上使用了“重新加载浏览器”一词）。

但此功能并非旨在重新加载浏览器。

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

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

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

因此需要函数

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

它的目的是让程序员专门定义他对用户历史记录的搜索。这就是它的全部目的。

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

如果您已经理解这一点，那么对于这么长的序言感到抱歉。但从你提出问题的方式来看，你没有。

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

查看我对this SO question 的回复。所以我建议在你的第二个参数中添加一个描述。根据记忆，这是用户在下拉菜单中看到的描述，当他单击并按住“返回”按钮时。

【参考方案3】：

window.history.pushState(urlPath:'/page1',"",'/page1')

仅在页面加载后有效，当您点击刷新时并不意味着有任何真实的 URL。

您应该在这里做的是知道当您重新加载此页面时您将被重定向到哪个 URL。 在该页面上，您可以通过获取当前 URL 并设置所有条件来获取条件。