window.history.pushState 刷新浏览器

问题描述

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

I am working on some javascript code, and using window.History.pushState to load new HTML pages, instead of using href tags. My code (which is working fine) looks like this.

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

奇怪的是，这个失败，即重新加载浏览器

strangely, this fails, ie reloads the browser

window.History.pushState({urlPath:'/page2.php'},"",'/page2.php')

但是这个有效，内容更新了，浏览器没有刷新！(注意 URL 是绝对的而不是相对的)

But this works, content is updated, browser not refreshed ! (notice the URL is absolute and not relative)

window.History.pushState({urlPath:'www.domain.com/page2.php'},"",'www.domain.com/page2.php')

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

The documentation for window.History.pushState says that the third parameter URL can be either absolute or relative -

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

URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

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

Absolute URLs seem to be working but relative seem to be not. Why is this happening?

推荐答案

简短的回答是 history.pushState(不是 History.pushState，它会抛出异常，window 部分是可选的)永远不会做你的建议.

The short answer is that history.pushState (not History.pushState, which would throw an exception, the window part is optional) will never do what you suggest.

如果页面正在刷新，那么它是由您正在做的其他事情引起的(例如，在地址栏更改的情况下，您可能正在运行的代码会转到新位置).

If pages are refreshing, then it is caused by other things that you are doing (for example, you might have code running that goes to a new location in the case of the address bar changing).

history.pushState({urlPath:'/page2.php'},"",'/page2.php') 与最新版本的 Chrome、IE 完全一样和 Firefox 给我和我的同事.

history.pushState({urlPath:'/page2.php'},"",'/page2.php') works exactly like it is supposed to in the latest versions of Chrome, IE and Firefox for me and my colleagues.

事实上，你可以在函数中放入任何你喜欢的东西:history.pushState({}, '', '这么久，感谢所有的鱼.不是一个真正的文件').

In fact you can put whatever you like into the function: history.pushState({}, '', 'So long and thanks for all the fish.not a real file').

如果您发布更多代码(特别注意 history.pushState 附近和使用 document.location 的任何地方的代码)，那么我们将不止很乐意帮助您找出此问题的确切原因.

If you post some more code (with special attention for code nearby the history.pushState and anywhere document.location is used), then we'll be more than happy to help you figure out where exactly this issue is coming from.

如果你发布更多代码，我会更新这个答案(我最喜欢你的问题):)

If you post more code, I'll update this answer (I have your question favourited) :).

这篇关于window.history.pushState 刷新浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！