History and Location objects in HTML5, html5location

History and Location objects in HTML5, html5location

Today we found that HTML5 improved the History and Location objects and provided several new APIs. I think it is very useful to use it in combination with Ajax to make up for the problem that Ajax technology updates content but does not generate historical records.

A long time ago, I thought about using the anchor to implement bookmarks and positioning. Using iframe with some tips can also generate historical records. Later I found thatIE8 and many other modern browsers have implemented the change of the anchpoint to generate historical records..

I remember, the first time I made a related small application is ICBC's online paging bookmarks feature: http://www.gdutonline.com/newstudent/Detail.aspx? Id = 14814, the page is in charge of the front-end, so if not processed, go to any page number is the same URL. My solution is: When you click to flip the page, the anchor will change. If you send a website with an anchor to someone else, he will also go to the page. However, I have not implemented the history record, that is to say, but when the user clicks back from the first page to the second page, the page will not jump to the first page, because the browser is only responsible for changing the URL, how Do We parse these changed URLs? We need to write programs by ourselves. But the question is, how do we know that the user clicks forward and backward? Is the URL changed? This needs to be implemented manually. There are generally three methods:

Next we will discuss the new features of History and Location in HTML5, mainly including two methods and two events.

Window. history. pushState (data, title [, url])
Insert a new record into the history record. The first parameter indicates the data to be transmitted. This parameter can be used in the event described below. The title is used to describe this page, the last optional parameter is used to change the URL. This is amazing because after the method is executed, the URL is changed (not just the anchor and query string ), but the page is still the original one. After this method is executed, a new record is inserted in the history record.

Window. history. replaceState (data, title [, url])
This method is similar to the above, but the above is to insert a new record, and this is to update this record. Do not repeat it.

PopStateEvent

This event is triggered when the historical position changes. There are two main scenarios: pushState and replaceState will be triggered when new historical records are inserted in the code, the other is triggered when we click forward and backward or select a historical position. Each historical location has a data parameter, which is the first parameter of pushState and replaceState. We can obtain the data parameter in this historical record through the state attribute in the event parameter.

HashChangeEvent event

This event is triggered when the anchor changes. There are many ways to trigger this event: 1. directly modify the location in the code. hash; 2. 3. Use the previous two History methods to modify the URL anchor. These methods can trigger the HashChangeEvent event. In addition, the event parameters have two attributes: oldURL and newURL.

Looking at these new features, we can see that HTML5 has greatly improved the historical web page model, especially when using Ajax applications, the forward and backward Bookmarks can all reply to their original roles. Some people may think that the above two events have repeated functions: If PopStateEvent and PopState are used separately, data can be transferred and located using historical records, however, because the location is not reflected in the URL, the bookmarks cannot be implemented. If HashChangeEvent and anchor are used, the Bookmarks can be implemented and can be used together with the hyperlink tags, however, this also has a disadvantage, because the unique identifier is recorded on the anchor, which means that a large amount of page data cannot be stored. The most perfect method is that they are all used together. The PushState method and PopStateEvent are mainly responsible for storing and Transferring huge page data, and the HashChangeEvent is responsible for page URL identification and bookmarks ~

The rest are old problems ...... When can browsers support it ?......

 

 

References

Do not use interval to imitate onHashChange

Onhashchange event and Ajax History manage

Html5 history api implementation

Onhashchange implemented without a timer

Anchor jump with animation effect

Get your Ajax application captured by Google