window.history.pushState刷新浏览器

Question

我正在研究一些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由此参数指定.请注意,在调用pushState()之后,浏览器不会尝试加载此URL,但稍后可能会尝试加载URL,例如在用户重新启动浏览器之后.新URL不一定是绝对的; 如果是相对的,则相对于当前URL进行解析.新URL必须与当前URL的源相同; 否则,pushState()将抛出异常.此参数是可选的; 如果未指定,则将其设置为文档的当前URL.

绝对URL似乎正在起作用,但相对似乎并非如此.为什么会这样？

Answer 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),那么我们将非常乐意帮助您找出问题的确切位置.

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

Answer 2

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

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

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

Answer 3

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

如果我已正确理解,那么您希望此功能为您刷新页面(实际上您使用术语"重新加载浏览器").

但是此功能并不是为了重新加载浏览器.

所有功能都是将新的"状态"添加(推送)到浏览器历史记录中,以便将来用户能够返回到该网页现在所处的状态.

通常,它与AJAX调用(仅刷新页面的一部分)一起使用.

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

因此需要这个功能

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

它旨在允许程序员专门定义他对用户历史记录的搜索.这就是它打算做的一切.

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

如果您已经理解了这一点,那么对于这个漫长的序言感到抱歉.但这听起来像你提出问题的方式,你没有.

另外,我还发现文档中描述函数的方式与实际工作方式之间存在一些矛盾.我发现使用空值或空值作为参数不是一个好主意.

看看我对这个问题的回答.所以我建议在第二个参数中添加一个描述.从内存中,这是用户在下拉列表中看到的描述,当他点击并按住鼠标悬停在"后退"按钮上时.