History
Internet Explorer 10 introduces support for the History interface of the HTML5 draft specification, which includes methods that enable you to manage a site's history stack and URL. This control gives end users the experience they expect from their Back and Forward buttons and the performance of small page updates without navigation or page loads. HTML5 History is defined in Section 5.4.2 of the World Wide Web Consortium (W3C)'s HTML5 specification.
The history.pushState() and history.replaceState() methods
Using the history.pushState() method, you can create a new history entry, and optionally include a state object. With the history.replaceState() method, you can modify the current history item. The syntax of these two methods follows.
history.pushState(data, title, url);
history.replaceState(data, title, url);
| Parameter | Description |
|---|---|
data |
A state object you want associated with the new history entry. This is returned as the state property of the onpopstate event. |
title |
This is currently ignored by Internet Explorer 10. |
url |
(Optional) A relative or absolute URL in the same domain or origin of the current URL. |
By using these new HTML5 methods, you can modify the path within the website, but because of security not the domain or origin of the current URL.You can also modify the fragment of the URL that follows the pound sign (also known as the hash), or the query segment that follows a question mark (?) of the URL . For example, using URL "https://go.microsoft.com/fwlink/p/?LinkId=214816", you can modify almost anything to the right of the ".com". You can change it to "https://go.microsoft.com/fwlink/p/?LinkID=58649" but, you can't change the domain (go.microsoft.com), the port, or the scheme (http://). The following table shows some other updates to this URL and whether they're allowed or not:
| URL change | Status |
|---|---|
| go.microsoft.com/foo | allowed |
| https://go.microsoft.com/foo | allowed |
| /foo | allowed |
| Foo?query | allowed |
| /foo#somedata | allowed |
| www.microsoft.com | error |
| https://go.microsoft.com:9090/foo | error |
The window.onpopstate event
The window.onpopstate event handler notifies your app when the user navigates between two travel entries in the history, where at least one was created with either history.pushState() or history.replaceState(). This occurs through UI interaction, such as clicking the back or forward button, clicking Back from a context menu, or pressing the backspace key. It also can occur by pressing alt+left, alt+right, or the backspace key, or by calling history.back, history.forward, or history.go.
The popstate event parameter contains the state object (set by the data parameter) from the pushState or replaceState method. The history.state property also contains the state object. When a page is initially loaded, the state will be null. When pushState is called, the forward stack is cleared, but calling replaceState does not clear the forward stack.
API Reference
IEBlog posts
Specification
HTML5: Section 5.5.2