window.history.pushState刷新浏览器


window.history.pushState refreshing the browser

我正在编写一些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的文档指出,第三个参数URL可以是绝对的,也可以是相对的-

URL——新历史记录条目的URL由该参数给定。笔记浏览器不会在调用后尝试加载此URLpushState((,但它可能稍后尝试加载URL,例如在用户重新启动浏览器之后。新URL不需要完全的如果它是相对的,那么它是相对于当前URL解析的。新URL必须与当前URL具有相同的来源;否则pushState((将引发异常。此参数是可选的;如果它没有指定,而是设置为文档的当前URL。

绝对URL似乎有效,但相对URL似乎无效。为什么会发生这种情况?

简单的答案是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的任何地方的代码(,那么我们将非常乐意帮助您找出这个问题的确切来源。

如果你发布更多的代码,我会更新这个答案(我有你的问题(:(。

正如其他人所建议的,您没有清楚地解释您的问题,您试图做什么,或者您对该函数实际应该做什么的期望是什么。

如果我理解正确,那么你希望这个函数能为你刷新页面(你实际上使用了"重新加载浏览器"这个术语(。

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

所有的功能都是在浏览器历史记录中添加(推送(一个新的"状态",这样在未来,用户将能够返回到网页现在所处的状态。

通常,这与AJAX调用(只刷新页面的一部分(一起使用。

例如,如果用户在你的一个搜索框中搜索"猫",并且搜索结果(可能是猫的可爱照片(通过AJAX加载回页面的右下角,那么你的页面状态将不会改变。换句话说,在不久的将来,当用户决定要返回搜索"CATS"时,他将无法返回,因为该状态在他的历史中不存在。他只能点击返回到你的空白搜索框。

因此需要功能

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

它的目的是允许程序员在用户的历史记录中专门定义他的搜索。这就是它的全部意图。

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

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

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

看看我对这个SO问题的回答。所以我建议在第二个参数中添加一个描述。根据记忆,这是用户在下拉列表中看到的描述,当他点击并将鼠标放在"后退"按钮上时。

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

只有在页面加载后才能工作,当您点击刷新时,并不意味着有任何真正的URL。

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