Home > Developer > Web Develop
Note: To run under the server
<body>
<a href= "test1.html" class= "History" > Click I jump to test1.html page </a>
<a href= "index1.html" class= "History" > Click I jump to index1.html page </a>
<a href= "hello.html" class= "History" > Click I jump to hello.html page </a>
<p> The following is the content that will be changed </p>
<div id= "Content" > </div>
<script type= "Text/javascript" >
$ (function () {
$ ('. History '). On (' click ', Function (e) {
This method notifies the Web server that the associated method is not executed
E.preventdefault ();
var href = $ (this). attr (' href ');
Get href
GetContent (href, true);
});
});
The State property of the Listener pushstate () Popstate event object contains a copy of the state object for this history entry.
Window.addeventlistener ("Popstate", function (e) {
Get the status value using E.state
GetContent (Location.pathname, false);//True to change only the path does not change the content
});
function getcontent (URL, a) {
Get path
$.get (URL)
. Do (Funcyion ()) executes the second callback function. Done is the solution to the deferred object that is the JQ callback function
. Done (function (data) {
Change Content
$ (' #content '). HTML (data);
if (a = = True) {
Add historical records
History.pushstate (null, NULL, URL);
}
});
}
</body>
HTML5 history implement no Refresh page
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
