Return implementation method in Html5 page

When you see this title, you may think what the hell is this? Actually what I want to say is this, watch the recording below:

This kind of interaction is common in H5 pages. Click on the city -> pop up the city selection floating layer -> press the return button to close the floating layer.

These operations can be performed without clicking the close button in the upper left corner/upper right corner. Fliggy’s H5 has a pop-up layer when moving forward, and the pop-up layer closes when returning. This does not work for other companies (Qunar.com H5 flight tickets, Meituan H5 hotel).

Because the H5 is operated on a mobile phone, the coverage area of ​​the finger-operable area on the mobile phone is very small, let alone the dead space (cancel/close) areas in the upper left corner/upper right corner. You've no doubt heard this action: tap to go back. This is very convenient and friendly for users to operate. After selecting a city, there is no need to click Cancel. Just click Return where the thumb can operate to close the pop-up layer.

Since there is such a very good demand, as a developer, you will definitely try your best to implement this function. You don’t even need to google, you should be able to think of methods like history.back(), history.go(). However, thinking of these is still useless. In theory, the return/forward of the browser/webview requires reloading the page because the URL has changed. If you really know about single page applications (SPA), or use React/Vue, you should know that there is something called: routing. These URL changes that change the hash and cannot be refreshed are the history functions added in 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

There is another event

1. onpopstate

pushState, replaceState are used to change the history stack order, onpopstate is triggered when returning and moving forward.

The same is true for the implementation in vue-router (line 1694)

Now that we have said so much, let’s take a look at how to implement this function.

Let’s take a look at the compatibility of pushState and replaceState

It's all green and feels much more secure to use.

Idea:

1. PushState adds hash when clicking on the pop-up layer
2. When the onpopstate event is triggered when tapping to return, the popup layer is hidden and the hash is modified.

 <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;> Simulation city pop-up layer</div> <div id=calendar class=com style=display: none;> Simulation calendar pop-up layer</div> <div id=description class=com style=display: none;> Simulate description pop-up layer</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'; } })

Mainly look at the JS code and monitor the forward and backward events of the page to control the history.

Source code here

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.