我正在处理一些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。
绝对网址似乎有效,但相对似乎并非如此。为什么会这样?
答案 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并满足您的所有条件来获取条件。