window.history.pushState刷新浏览器

时间:2014-06-19 13:08:30

标签: javascript php html browser pushstate

我正在处理一些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的{​​{3}}表示第三个参数网址可以是绝对的也可以是相对的 -

  

URL - 此参数提供新历史记录条目的URL。注意   浏览器在调用后不会尝试加载此URL   pushState(),但它可能会稍后尝试加载URL   用户重启浏览器后。新URL不需要   绝对;如果它是相对的,则相对于当前URL进行解析。   新网址必须与当前网址的来源相同;除此以外,   pushState()将抛出异常。此参数是可选的;如果   它没有被指定,它被设置为文档的当前URL。

绝对网址似乎有效,但相对似乎并非如此。为什么会这样?

3 个答案:

答案 0 :(得分:35)

简短的回答是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的任何地方),那么我们非常乐意帮助您找出具体位置这个问题来自。

如果你发布更多代码,我会更新这个答案(我的问题很受欢迎):)。

答案 1 :(得分:5)

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

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

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

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

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

例如,如果用户进行搜索" CATS"在你的一个搜索框中,搜索结果(可能是猫的可爱图片)通过AJAX加载回到你页面的右下方 - 然后你的页面状态就不会改变了。换句话说,在不久的将来,当用户决定他想回到他的“CATS"”时,他就无法做到,因为国家并没有这样做。存在于他的历史中。他只能点击回到您的空白搜索框。

因此需要功能

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

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

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

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

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

请参阅我对this SO question的回答。所以我建议在第二个参数中添加一个描述。从内存中,这是用户在下拉列表中看到的描述,当他点击并按住鼠标时,"返回"按钮。

答案 2 :(得分:2)

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

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

这里你应该做的是知道重新加载此页面时要重定向的URL。 在该页面上,您可以通过获取当前URL并满足您的所有条件来获取条件。