Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to understand the History API of HTML5". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand the History API of HTML5".

Browser support

At the time of writing this article, the major browsers support History API is very good, you can click here to see its support, this link will tell you which browsers support, and before using, there are always good practices to detect specific features supported.

To determine whether the browser supports the API in a change mode, you can verify it with the following line of code:

XML/HTML Code copies content to the clipboard

Return! (window.history & & history.pushState)

In addition, I suggest referring to this article: Detect Support for Various HTML5 Features. (ps: later translation)

If you are using a modern browser, you can use the following code:

XML/HTML Code copies content to the clipboard

If (Modernizr.history) {

/ / History API Supported

}

If your browser does not support History API, you can use history.js instead.

Use History

HTML 5 provides two new methods:

1. History.pushState (); 2. History.replaceState ()

Both methods allow us to add and update histories, which work the same way and can add the same number of parameters. In addition to methods, there are popstate events. How and when to use the popstate event will be described later.

The pushState () parameter is the same as the replaceState () parameter, which is described as follows:

1. State: stores JSON strings, which can be used in popstate events.

2. Title: most browsers do not support or ignore this parameter, so it is best to use null instead.

3. Url: any valid URL used to update the browser's address bar, regardless of whether the URL already exists in the address list. More importantly, it does not reload the page.

The main difference between the two methods is that pushState () adds a new entry to the history stack and replaceState () replaces the current record value. If you are still confused about this, use some examples to prove the difference.

Suppose we have two stack blocks, one labeled 1, the other marked 2, and you have a third stack block, labeled 3. When pushState () is executed, stack block 3 is added to the existing stack, so the stack has three block stacks.

In the same scenario, when replaceState () is executed, block 3 will be placed on the stack of block 2. So the number of history records remains the same, that is, pushState () increases the number of history by 1. 5%.

The comparison results are shown in the following figure:

So far, in order to control the browser's history, we have ignored the events of pushState () and replaceState (). But assuming that the browser counts a lot of bad records, users may or may not be redirected to these pages. In this case, unexpected problems occur when the user uses the browser's forward and backward navigation buttons.

Although we expect the popstate event to be triggered when we use pushState () and replaceState () for processing. But in fact, this is not the case. In contrast, when you browse the session history, whether you click the forward or back buttons, or use the history.go and history.back methods, popstate will be triggered.

In WebKit browsers, a popstate event would be triggered after document's onload event, but Firefox and IE do not have this behavior. (in WebKit browsers, the popstate event is triggered after the onload event of document, and Firefox and IE do not have this behavior.)

Demo example

HTML:

XML/HTML Code copies content to the clipboard

Home

About

Contact

Click on Links above to see history API usage using pushState method.

Home!

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

JavaScript:

XML/HTML Code copies content to the clipboard

JQuery ('document') .ready (function () {

JQuery ('.API') .on ('click', function (e) {

E.preventDefault ()

Var href = $(this) .attr ('href')

/ / Getting Content

GetContent (href, true)

JQuery ('.API') .removeClass ('active')

$(this) .addClass ('active')

});

});

/ / Adding popstate event listener to handle browser back button

Window.addEventListener ("popstate", function (e) {

/ / Get State value using e.state

GetContent (location.pathname, false)

});

Function getContent (url, addEntry) {

$.get (url)

.done (function (data) {

/ / Updating Content on Page

$('# contentHolder') .html (data)

If (addEntry = = true) {

/ / Add History Entry using pushState

History.pushState (null, null, url)

}

});

}

Thank you for your reading, the above is the content of "how to understand the History API of HTML5", after the study of this article, I believe you have a deeper understanding of how to understand the History API of HTML5, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.