This article is transferred from: http://blog.csdn.net/wkyseo/article/details/51699770
Ajax is a very fun little thing, but there are some problems with it.
We can use ajax to change the content of the document without refreshing, but there is no way to modify the URL , that is, it is impossible to realize the browser's forward and backward, bookmark collection functions.
Use the hash part of location and use window.onhashchange to achieve
hash is the part after # in uri, for example: #123 of www.google.com.hk#123. When only the hash part changes, the browser's history record will generate a record, but it will not send a request to the server. At this time, the uri of the address bar will change when the back button is pressed, but the page content will remain unchanged.
Listen for changes in the hash value through the window.onhashchange event.
ie6 and 7 do not support onhashchange, but you can use setInterval to regularly check for hash changes, or the method of checking in onload
Zeng Jin classic scene: Gmail uses iframe and hash to achieve forward and backward functions
This method is very unfriendly to search engines . Twitter and google agree to use hash bang (#!xxx), that is, the first character after the hash is an exclamation mark. They will crawl such URLs, but other Search engines do not support.
html5的history
In HTML4, the Histroy object has the following property methods:
- length : The number of records in the history stack.
- back() : Return to the previous page.
- forward()：前进到下一页。
- go([delta])：delta是个数字，如果不写或为0，则刷新本页；如果为正数，则前进到相应数目的页面；若为负数，则后退到相应数目的页面。
在HTML5中，新增了两个方法和一个事件：
pushState
history.pushState(stateObject, title, url)，包括三个参数。
-
第一个参数用于存储该url对应的状态对象，该对象可在onpopstate事件对象（event.state）中获取，也可在history对象（history.state）中获取。
-
第二个参数是标题，目前浏览器并未实现。
-
第三个参数则是设定的url。一般设置为相对路径，如果设置为绝对路径时需要保证同源。
pushState函数向浏览器的历史堆栈压入一个url为设定值的记录，并改变历史堆栈的当前指针至栈顶。
replaceState
该接口与pushState参数相同，含义也相同。唯一的区别在于replaceState是替换浏览器历史堆栈的当前历史记录为设定的url。需要注意的是，replaceState**不会改动**浏览器历史堆栈的当前指针。
onpopstate
该事件是window的属性。该事件会在调用浏览器的前进、后退以及执行history.forward、history.back、和history.Go触发，因为这些操作有一个共性，即修改了历史堆栈的当前指针。在不改变document的前提下，一旦当前指针改变则会触发onpopstate事件。
popstate事件对象(event)的state属性包含了这个历史记录条目的state对象的一个拷贝.
window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数.
history.pushState({page: 1}, "title 1", "?page=1"); //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Check out the example written by Zhang Xinxu .
Practical analysis of specific scenarioshttp ://www.cnblogs.com/accordion/p/5699372.html#top
Browser Compatibility
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari| replaceState, pushState | 5 | 4.0 (2.0) | 10 | 11.50 |
| history.state | 18 | 4.0 (2.0) | 10 | 11.50 |
3. Open source PJAX library
- The library encapsulated by welefen encapsulates jquery, qwrap and kissy, github address
- Yahoo Team PJAX Address
Not all links in the page need to be loaded using PJAX, all add an attribute to the a tag that needs this thing, such as data-pjax=true, and then add events uniformly.