One ,window.history object
history.back() Same as clicking the back button in the browser
histroy.forward() Same as clicking the forward button in the browser
history.go() Parameters can be filled in the method （ Indicates the number of jump pages ）
For safety reasons javascript Modification is not allowed history It's already there url link , But it can be used pushState Methods histroy In addition url link , And provide popstate Event monitoring history Pop up in the stack url.
pushState Method takes three parameters , The order is as follows ：state： A status object associated with the specified URL ,poststate When the event is triggered , The object passes in a callback function . If you don't need this object , You can fill in here null.title： Title of the new page , But all browsers currently ignore this value , So you can fill in here null,url： New web address , Must be in the same domain as the current page , The browser's address bar will show the address .pushState() You can create history , It can cooperate popstate event , have access to history.go(-1) Return to previous page . and replaceState It won't be added to the history , use history.go(-1) The current page will be skipped, equivalent to history.go(-2).
Two , Monitor return , back off , The previous button listens for events
window.addEventListener("popstate",function(e){ alert(" Monitoring event succeeded "); },false)
Although the backward event is monitored , If you press return, you can return to the previous page , So it needs to be used pushState Add a url,“#” Represents this page
function pushHistory(){ var state={ title:"title", url:"#" };
window.history.pushState(state,"title","#"); }
Technology