問(wèn)題描述

我正在編寫(xiě)一些 javascript 代碼，并使用 window.History.pushState 加載新的 HTML 頁(yè)面，而不是使用 href 標(biāo)簽.我的代碼(工作正常)看起來(lái)像這樣.

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')

奇怪的是，這個(gè)失敗，即重新加載瀏覽器

strangely, this fails, ie reloads the browser

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

但是這個(gè)有效，內(nèi)容更新了，瀏覽器沒(méi)有刷新！(注意 URL 是絕對(duì)的而不是相對(duì)的)

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 的文檔 表示第三個(gè)參數(shù) URL 可以是絕對(duì)的也可以是相對(duì)的 -

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

URL — 新歷史條目的 URL 由該參數(shù)給出.筆記瀏覽器不會(huì)在調(diào)用后嘗試加載此 URLpushState()，但它可能會(huì)稍后嘗試加載 URL，例如用戶重新啟動(dòng)瀏覽器后.新的 URL 不需要絕對(duì);如果是相對(duì)的，則相對(duì)于當(dāng)前 URL 進(jìn)行解析.新 URL 必須與當(dāng)前 URL 同源；否則，pushState() 將拋出異常.該參數(shù)是可選的；如果它沒(méi)有指定，它被設(shè)置為文檔的當(dāng)前 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.

絕對(duì) URL 似乎有效，但相對(duì) URL 似乎無(wú)效.為什么會(huì)發(fā)生這種情況?

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

推薦答案

簡(jiǎn)短的回答是 history.pushState(不是 History.pushState，它會(huì)拋出異常，window 部分是可選的)永遠(yuǎn)不會(huì)做你的建議.

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.

如果頁(yè)面正在刷新，那么它是由您正在做的其他事情引起的(例如，在地址欄更改的情況下，您可能正在運(yùn)行的代碼會(huì)轉(zhuǎn)到新位置).

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.

事實(shí)上，你可以在函數(shù)中放入任何你喜歡的東西:history.pushState({}, '', '這么久，感謝所有的魚(yú).不是一個(gè)真正的文件').

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').

如果您發(fā)布更多代碼(特別注意 history.pushState 附近和使用 document.location 的任何地方的代碼)，那么我們將不止很樂(lè)意幫助您找出此問(wèn)題的確切原因.

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.

如果你發(fā)布更多代碼，我會(huì)更新這個(gè)答案(我最喜歡你的問(wèn)題):)

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

這篇關(guān)于window.history.pushState 刷新瀏覽器的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！