History API

You can dynamically change the URL in the address bar of the browser and modify the resources displayed on the page without refreshing the page.

Methods and properties of window.history

Methods:back() forward() go()

Properties:length
// Return window.history.back() window.history.go(-1) // Forward to window.history.foward() window.history.go(1) // Total number of pages in history history.lengthCopy the code

HTML5 new method: Add and replace entries in history

pushState
history.pushState(state, title, url);Add a history without refreshing the page
parameter
state: a state object associated with the specified url that is passed into the callback function when the popState event is triggered. If this object is not needed, null can be used here.

title: The title of the new page, but all browsers currently ignore this value, so null can be filled in here.

url: new url, must be in the same domain as the previous page. The browser’s address bar will display the url.
Create two documents,demo.html and index.html, change their title to their corresponding name, and enter the document name in the body as the content tag document.
//index.html
history.pushState(null, null,'./demo.html')
Copy the code

The browser didn’t refresh to load demo.html, just changed the browser address bar address
//index.html
history.pushState(null, null,'./demo.html')
history.pushState(null, null,'./inexistence.html')
Copy the code

Inexistence.html is not checked for existence
Apply – Add hash values and the page is only partially loaded
//index.html
history.pushState(null, null,'#one')
Copy the code
replaceState
history.replaceState(state, title, url);Replaces the current history without refreshing the page
//demo.html
history.replaceState(null, null,'? one')
Copy the code
Current historyhttp://localhost/class/demo.htmlBe replaced byhttp://localhost/class/demo.html?one

The event

1.popstateEvent: Triggered and called when history changeshistory.pushState()orhistory.replaceState()The PopState event is not triggered

2.hashchangeEvent: when the pagehashTriggered when a value changes, often used to build single-page applications.

application

Click on Botton, and the corresponding content appears in the Content area. You can return to the previous content page through the browser back button.
HTML
<div class="wrapper">
    <div class="header"> <! --> <button data="first">first</button>
        <button data="second">second</button>
        <button data="third">third</button>
    </div>
    <div class="content">
        <div class="item">first</div>
    </div>
</div>
Copy the code
JS
var item = document.getElementsByClassName('item') [0]; var header = document.getElementsByClassName('header') [0]; var page =' ';
function init(){// replace the page history with {newPage:'first'} history.replaceState({newPage:'first'}, null, '? first');
    ajax('GET'.'./getContent.php'.'page=first'.doData, true)
}
init();
function doData(Data){// Insert ajax Data into the item element node item.innerhtml = Data; } header.addEventListener('click'.function(e){
    
    page = e.target.getAttribute('data');
    history.pushState({newPage : page}, null, '? '+page);
    ajax('GET'.'./getContent.php'.'page='+page, doData, true); }) // PopState listens for history changes as pages move forward and backward, triggering ajax requests for the corresponding pages. window.addEventListener('popstate'.function(e){
    // console.log(e)
    var newPage = e.state.newPage;
    ajax('GET'.'./getContent.php'.'page='+newPage, doData, true);
})
Copy the code
php
<? php header('content-type:text/html; charset="utf-8"');
error_reporting(0);

$page = $_GET['page'];
if($page= ='first') {$data = 'first third';
}else if($page= ='second') {$data = 'second third';
}else if($page= ='third') {$data = 'third third';
}

echo"{$data}";
Copy the code