The return implementation method on the Html5 page.

The return implementation method on the Html5 page.

What do you think is this? In fact, I want to talk about this. Check the following recording:

This type of interaction is everywhere on H5 pages. Choose city> pop-up city> floating layer> press the return button to close the floating layer.

Do not click the close button in the upper-left or upper-right corner to perform these operations. The H5 of fliggy displays the bullet layer forward, and the bullet layer is closed when the response is returned, none of the above (where can I find an H5 plane ticket, or an H5 Hotel in Meituan ).

Why is it designed like this?

Because H5 is operated on a mobile phone, the finger-operated areas on the mobile phone cover a small area, not to mention the dead corners (cancel/Close) in the upper left/upper right corner. You must have heard of this operation: Click to return. This is very convenient and friendly during user operations. After selecting a city, you do not need to click Cancel. You can click return directly in the place where you can operate with the thumb to close the bullet layer.

How to Implement

Since there is such a very good demand, as a development, we will definitely try to implement this function. You don't even need to use google. You should think of methods like history. back () and history. go. However, it is still useless to think of this. Theoretically, the browser/webview returns/forwards the page to re-load the page because the URL has changed. If you really know a single page application (SPA), or use React/Vue, you should know that there is a thing called routing. These url changes that cannot be refreshed by changing the hash are the history function added to HTML5.

The-history-interface

interface History {  readonly attribute unsigned long length;  attribute ScrollRestoration scrollRestoration;  readonly attribute any state;  void go(optional long delta = 0);  void back();  void forward();  void pushState(any data, DOMString title, optional DOMString? url = null);  void replaceState(any data, DOMString title, optional DOMString? url = null);};

1. PushState
2. ReplaceState

Another event

1. Onpopstate

PushState and replaceState are used to change the histroy stack sequence. onpopstate is triggered when the return and forward operations are performed.

The same is true for vue-router (1694th rows)

Implementation

Since we have said so much, let's look at how to implement this function.

Let's take a look at the compatibility between pushState and replaceState.

It's all green, and it's much easier to use.

Ideas:

1. Add hash when you click pushState on the bullet Layer
2. Hide the bullet layer when the onpopstate event is triggered and modify the hash

<Button onclick = "city ()"> city </button> <br> <button onclick = "calendar () "> calendar </button> <br> <button onclick =" description () "> description </button> <div id =" city "class =" com "style =" display: none; "> simulate the urban bullet BOX layer </div> <div id =" calendar "class =" com "style =" display: none; "> simulate the calendar bullet BOX layer </div> <div id =" description "class =" com "style =" display: none; "> simulated instructions </div>

      button {          border: #0000;          background-color: #f90;      }      .com {        position: absolute ;        top: 0;        bottom: 0;        left: 0;        right: 0;        background-color: #888589;      }

var cityNode = document.getElementById('city');    var calendarNode = document.getElementById('calendar');    var descriptionNode = document.getElementById('description');      function city() {        cityNode.style.display = 'block';        window.history.pushState({'id':'city'},'','#city')      }      function calendar() {        calendarNode.style.display = 'block';        window.history.pushState({'id':'calendar'},'','#calendar')      }      function description() {        descriptionNode.style.display = 'block';        window.history.pushState({'id':'description'},'','#description')      }      window.addEventListener('popstate', function(e){        // alert('state:' + e.state + ', historyLength:' + history.length);        if (e.state && e.state.id === 'city') {            history.replaceState('','','#');            cityNode.style.display = 'block';        } else if (e.state && e.state.id === 'calendar') {            history.replaceState('','','#');            calendarNode.style.display = 'block';        } else if (e.state && e.state.id === 'description') {            history.replaceState('','','#');            descriptionNode.style.display = 'block';        } else {            cityNode.style.display = 'none';            calendarNode.style.display = 'none';            descriptionNode.style.display = 'none';        }      })

The main focus is on JS Code, listening to the forward and backward events of the page to control history.

Source code here

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.