html5 history solves the problem that ajax cannot join history

Recently, I took the time to study the html5 history and wrote a small test. Because it is only displayed in the front end, I changed the ajax processing into a simple JS event, and directly copied the code, which can be viewed in the static page.

1, Basic operation

//Browser Back

window.history.back();
window.history.go(-1);

//Browser forward

window.history.forward();
window.history.go(1);

//Browser refresh

window.history.go(0);

2, history method

1,history.pushState()

pushState(state,title,url) method has three parameters;

State (the first parameter): put in the data to be saved in the history, and encapsulate it in the form of object;

title (the second parameter): it can be ignored at present and is not needed at all;

url (the third parameter): the suffix added to the original url address can be separated from the original url by a question mark, which is the value here

2,history.replaceState()

Replace the history of the current page with the same usage as pushState;

Note: if only data is replaced, the third value is not required

3,popstate

Whenever the history item of an activity changes (pushState or replaceState), the popstate event is passed to the window object, and then the changed value is read during browser operation;

Note: remember to write the data processing in the popstate, and the browser will normally display the page seen before;

4,window.onpopstate()

When the browser operates (forward / backward), the window. Onpopustate() event will be triggered to retrieve data from the history of the window;

3, A simple example

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		div{
			position: fixed;
			top: 100px;
			font-size: 22px;
		}
	</style>
	<body>
		<div id="text">This is page 0</div>
		<button onclick="change(this)" page="0">Click Change</button>
		<button onclick="change(this)" page="1">Click Change</button>
		<button onclick="change(this)" page="2">Click Change</button>
		<button onclick="change(this)" page="3">Click Change</button>
		<script>
			var obj={};	
			function url_deal(){
//				Get url, simulate background decoding and transfer data
				var url = window.location.href,
					_page = url.split("?")[1].split("&");
					_page.map(function(str){
						var arr = str.split("=");
						obj[arr[0]] = arr[1]	
					})
				return obj	
			}
			url_deal();
			var value =	[
					"This is page 0",
					"This is the first page",
					"This is the second page",
					"This is page 3",					
				];
//				data processing 
				document.getElementById("text").innerHTML = value[obj.page||0];
//				Replace the history of the current page and store the data
				history.replaceState({text:document.getElementById("text").innerHTML}, '');
//				console.log(obj)
		</script>
		<script>	
			function change(_self){
//				_self.getAttribute("page") is the value of the page attribute in the button
				url_deal();//Retrieve the url and decode it

//				Note: Here you can ask ajax to get data instead 
				var text1 = "This is the first."+_self.getAttribute("page")+"Page";
				document.getElementById("text").innerHTML = text1;
				
				
//				history.pushState is to add history to the browser. You can put the value to be saved into history.state (the first parameter) (the data is put into history)
				if(obj.page && obj.page == _self.getAttribute("page")){
//					Judge if the current page is the same as the page to be requested, then call the browser to refresh
					window.location.reload();
					return;
				}
				else if(!obj.page && "0" == _self.getAttribute("page")){
					window.location.reload();
					return;
				}
				
//				In the first parameter after pushState, the example here is: {text:text1}				
				history.pushState({text:text1}, '', '?page='+_self.getAttribute("page"));
				obj = {}//Clear the content for the next time to fill in the data
				
			}
//			 popstate, which runs when the browser changes (forward, backward, refresh)
			window.addEventListener("popstate", function() {
//				history.state points to the first value of history.pushState above
//				The data here can be imported during forward / backward / refresh
			    var result = history.state;
//              Here, the stored data should be processed, and the corresponding data should be filled in the required position to display the saved interface normally
				document.getElementById("text").innerHTML = result.text;
			});
		</script>
	</body>
</html>

Keywords: html5 Attribute

Added by satant on Mon, 30 Mar 2020 20:11:48 +0300

Programming VIP