How to use History.js (from the blog Park)

Ajax preserves the browser's history of solutions

<ul class= "Menu" >
<li><a href= "/home/index#page=1" >page1</a></li>
<li><a href= "/home/index#page=2" >page2</a></li>
<li><a href= "/home/index#page=3" >page3</a></li>
</ul>

<div id= "Mainpanel" >
</div>

First write a method to get the hash value of the specified key in the current URL , as follows:

<script type= "Text/javascript" >
Gets the hash value of the specified key
function Gethash (key, URL) {
var hash;
if (!! URL) {
hash = Url.replace (/^.*?[ #](.+?) (?:\?. +)? $/, "$");
hash = (hash = = URL)? "": hash;
} else {
hash = Self.location.hash;
}

hash = "" + hash;
hash = Hash.replace (/^[?#]/, ");
hash = "&" + hash;
var val = hash.match (New RegExp ("[\&]" + key + "= ([^\&]+)", "I"));
if (val = = NULL | | Val.length < 1) {
return null;
} else {
Return decodeURIComponent (val[1]);
}
}
</script> using the Onhashchange event to trigger an AJAX request: <script type= "Text/javascript" >

Work here has been completed 80%, why is 80%, there is a problem:

When you enter this address directly in the address bar of the browser (the newly opened tab): Http://localhost:3859/home/index#page=3 or send your friends through QQ, see not as you think should be page=3 content, But the content of the Http://localhost:3859/home/index. The reason is simple--the Onhashchange event is not triggered when the page loads.

So we're going to append a line to the above code:

function Loadpanel () {
var page = gethash ("page");
if (page = = 1) {
$ ("#mainPanel"). Load ("/home/page1");
}
if (page = = 2) {
$ ("#mainPanel"). Load ("/home/page2");
}
if (page = = 3) {
$ ("#mainPanel"). Load ("/home/page3");
}
}
$ (window). Bind ("Hashchange", Loadpanel);
</script>

$ (Loadpanel);
Or
$ (function () {$ (window). Trigger ("Hashchange");});

Onhashchange event Location.hash is triggered when the change occurs, it is a good solution to the Ajax refresh back/forward key failure problem, is a new event,

Currently Chrome, Firefox,opera, SAFARI,IE8 and above browsers are compatible.

In fact for those who are ie6,ie7 to hold the user, we do not need to provide them with such user experience.

Scenario Two: Using JQuery.History.js

For compatibility with IE6, IE7, the author has been using jquery.history.js this plugin (https://github.com/tkyk/jquery-history-plugin).

This plugin it will determine whether the browser supports Onhashchange events, if not supported, the timing (each 100 milliseconds) loop to determine if the hash has changed, so that the corresponding processing.

Such as:

<script src= "/scripts/jquery.history.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (function () {
$.history.init (function (hash) {
var page = gethash ("page");
if (page = = 1) {
$ ("#mainPanel"). Load ("/home/page1");
}
if (page = = 2) {
$ ("#mainPanel"). Load ("/home/page2");
}
if (page = = 3) {
$ ("#mainPanel"). Load ("/home/page3");
}
});
});
</script>

In addition, this plugin is no longer updated and maintained.

Scenario Three: Jquery.ba-hashchange.js

Jquery.ba-hashchange.js (http://benalman.com/projects/jquery-hashchange-plugin/)

This plugin is implemented in exactly the same way as jquery.history.js. The cycle interval is 50 milliseconds.

It overwrite the Window.hashchange event so that it can be compatible with all browsers.

Use the following:

<script src= "/scripts/jquery.ba-hashchange.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (window). Hashchange (function () {
var page = gethash ("page");
if (page = = 1) {
$ ("#mainPanel"). Load ("/home/page1");
}
if (page = = 2) {
$ ("#mainPanel"). Load ("/home/page2");
}
if (page = = 3) {
$ ("#mainPanel"). Load ("/home/page3");
}
});
$ (window). Hashchange ();
</script>

How to use History.js (from the blog Park)