2011年2月24日 星期四

[HTML] history pushState, 如何改變瀏覽器網址狀態,但是不更換頁面

如何改變瀏覽器網址狀態,但是不更換頁面
Change browser's URL bar without to change web page.

以前要改變狀態都只能使用HASH,如下,

The old method, you can use HASH. For example,

http://localhost/index.php#head.

現在你可以任意改變網址的狀態。
Now you can change URL as you want to.

http://localhost/index/head

如果你的瀏覽器支援HTML5,可以使用History,根據whatwg官方說明。
Now if your browser support HTML5, you can use this, The History interface.
According whatwg spec,

window . history . pushState(data, title [, url ] )
Pushes the given data onto the session history, with the given title, and, if provided, the given URL.

此方法會將將資料,網址標題,網址瀏覽歷程填入session history中。

如此你可以使用javascript改變網址狀態同時不更新網頁,網址可以更貼近語意,還蠻酷的。
Of course, you can change URL with javascript and it does not change page. And URL will be semantic. It sounds cool.

Ref:
http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#history-0
http://developer.yahoo.com/yui/3/history/

沒有留言:

張貼留言

Facebook