HTML 5 History API's "previous generation and current generation" and api's previous generation and current generation

HTML 5 History API's "previous generation and current generation" and api's previous generation and current generation

Original article: An Introduction To The HTML5 History API

Introduction to HTML 5 History API

Translator: dwqs

History is interesting, isn't it? In previous HTML versions, we have limited operations on browsing history records. We can use the available methods back and forth, but this is what we can do.

However, with the History API of HTML 5, we can better control the History of the browser. For example, you can add a record to the list of history records, or update the URL in the address bar when the refresh is not performed.

 

Why do I introduce History APIs?

In this article, we will learn about the source of the History API in HTML 5. Previously, hash values were often used to change the page content, especially those that are particularly important to the page. Because there is no refresh, it is impossible to change the URL of a single page application. In addition, when you change the hash value of a URL, it has no impact on the browser's historical records.

Now, for the History API of HTML 5, these can be easily implemented. However, because hash values are not required for a single page application, additional development Scripts may be required. It also allows us to create new apps in a SEO-friendly way. In addition, it can reduce bandwidth, but how can we prove it?

In this article, I will use the History API to develop a single-page application to prove the problem.

This also means that I have to load necessary resources on the homepage first. Now, the page only loads the required content. In other words, the application does not load all the content from the very beginning. It is loaded only when the second application content is requested.

Note: You need to execute some server-side code to only provide some resources, rather than the complete page content.

 

Browser support

When writing this article, mainstream browsers provide excellent support for the History API. You can click here to view the supported information. This link will tell you the supported browsers, before using it, we always have good practices to detect supported specific functions.

To determine whether the browser supports this API, use the following code to check whether the API is supported:

return !!(window.history && history.pushState);

 

In addition, I suggest you refer to this article: Detect Support for Various HTML5 Features. (ps: Will be translated later)

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

if (Modernizr.history) {    // History API Supported}

 

If your browser does not support the History API, 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 history records. They work in the same way and can add the same number of parameters. In addition to methods, there are also popstate events. The following describes how to use and when to use the popstate event.

The pushState () and replaceState () parameters are the same. The parameters are described as follows:

1. state: stores JSON strings and can be used in popstate events.

2. title: currently, most browsers do not support or ignore this parameter. It is best to use null instead.

3. url: Any valid URL, used to update the address bar of the browser, and does not care 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 () is to add a new entry to the history stack, and replaceState () is to replace the current record value. If you are still confused, use some examples to prove the difference.

Suppose we have two stack blocks, one marked as 1 and the other marked as 2. You have a third stack block marked as 3. When pushState () is executed, stack block 3 is added to an existing stack. Therefore, there are three stacks.

In the same hypothetical scenario, when performing replaceState (), block 3 will be placed on the stack of Block 2. So the number of history records remains unchanged. That is to say, pushState () will add 1 to the number of history records.

The comparison result is as follows:

At this point, in order to control the browser's history, we ignore the pushState () and replaceState () events. However, if the browser collects a lot of bad records, the user may be redirected to these pages, or even not. In this case, when you use the browser's forward and backward navigation buttons, unexpected problems may occur.

Even if we use pushState () and replaceState () for processing, we expect the popstate event to be triggered. But in fact, this is not the case. On the contrary, when you browse session history, whether you click the forward or backward button or use the history. go and history. back methods, popstate will be triggered.

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

Demo

HTML:

<div class="container">    <div class="row">        <ul class="nav navbar-nav">            <li><a href="home.html" class="historyAPI">Home</a></li>            <li><a href="about.html" class="historyAPI">About</a></li>            <li><a href="contact.html" class="historyAPI">Contact</a></li>        </ul>    </div>    <div class="row">        <div class="col-md-6">            <div class="well">                Click on Links above to see history API usage using <code>pushState</code> method.            </div>        </div>        <div class="row">               <div class="jumbotron" id="contentHolder">                
 
JavaScript:
<script type="text/javascript">    jQuery('document').ready(function(){                 jQuery('.historyAPI').on('click', function(e){            e.preventDefault();            var href = $(this).attr('href');                         // Getting Content            getContent(href, true);                         jQuery('.historyAPI').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);            }                     });    }</script>
 
Demo 1: HTML 5 History API-pushState
Historical entries are calculated in the browser, and the forward and backward buttons of the browser can be easily used. View Demo (ps: When you click the demo1 tab, its records will be added to the browser's Historical Records. When you click the back/forward button, you can go back to/to the page corresponding to the tab you clicked previously)
Demo 2: HTML 5 History API-replaceState
Historical entries are updated in the browser and cannot be viewed using the forward and backward buttons of the browser. View Demo (ps: When you click the demo1 tab, the history of the current browser will be replaced. When you click the back/forward button, you cannot go back to/to the page corresponding to the tab you clicked previously. Instead, you can go back to/to the previous page of demo2)
Summary (ps: like these two words ~~~ __^ ~~~)
The History API in HTML 5 has a great impact on Web applications. In order to easily create efficient and SEO-friendly single-page applications, it removes the dependency on hash values.
Next article: Do you have a blog collection?


Javascript: historygo (-1) How can I solve the problem when the webpage has expired?
Expired... What can I do .. HTML5 has a history api. You can check it out.
 
Html5 file api uploads files
You can go to PHP100 for consultation ~ In html5, if a file is uploaded, the entire file is converted to base64 encoding and then stored in the file. However, your PHP program may not read base64