html 开奖 api demo,javascript - HTML5 History API Demo - Stack Overflow

Ok, I created what I think is the SIMPLEST form of history API demo.

It can't work in jsfiddle because it needs to run in its own window. It will however work if you copy-paste the code in notepad, add a reference to jquery where indicated, and save it on your desktop as an html file. Of course, it doesn't work in IE, but we all know that.

I've put in two versions: the one that works without the URL rewrite component (it'll work from your desktop) and I've also commented out the version where you can manipulate the URL. For the latter, you need to run it from a server, either remote or local.

I've struggled to get it working across all browsers because Chrome, Safari and Firefox work differently! Here's the code:

.Panel{

width:200px;

height:100px;

background:red;

display:none;

color:white;

padding:20px 20px;}

.ChangeButton{

margin:10px 10px;

float:left;}

// add reference to jquery.js file here

//

var TheURL; // if you don't need URL rewrite, then we're always going to

// show the same URL. Remove this line if you want URL rewrite.

var MyDivs = { // this object stores the name and the URL of each possible state

ShowPanel1: {panelID:'Panel1', DisplayURL:'/panel1'},

ShowPanel2: {panelID:'Panel2', DisplayURL:'/panel2'},

ShowPanel3: {panelID:'Panel3', DisplayURL:'/panel3'},

ShowPanel4: {panelID:'Panel4', DisplayURL:'/panel4'},

};

$(document).ready(function () {

TheURL = document.URL; // You can remove this line if you're doing

// URL rewrite

window.addEventListener('popstate', function (event) {

//cross-browser nightmare here!!!!!

var HistoryState = history.state;

if (HistoryState === null || HistoryState === undefined) {

HistoryState = event.state; }

if (HistoryState === null || HistoryState === undefined) {

HistoryState = window.event.state; }

SwitchPanel(HistoryState);

});

$('.ChangeButton').click(function () {

DoChange(parseInt($(this).attr('id').charAt(6), 10)); });

DoChange(1);

});

function DoChange(ButtonID) {

switch (ButtonID) {

// here's the 2-version option:

// toggle the commented and uncommented history.pushState

// lines to see the change to the URL in action

case 1:

SwitchPanel(MyDivs.ShowPanel1.panelID);

history.pushState(MyDivs.ShowPanel1.panelID, "", TheURL);

// history.pushState(MyDivs.ShowPanel1.panelID, "", MyDivs.ShowPanel1.DisplayURL);

break;

case 2:

SwitchPanel(MyDivs.ShowPanel2.panelID);

history.pushState(MyDivs.ShowPanel2.panelID, "", TheURL);

// history.pushState(MyDivs.ShowPanel2.panelID, "", MyDivs.ShowPanel2.DisplayURL);

break;

case 3:

SwitchPanel(MyDivs.ShowPanel3.panelID);

history.pushState(MyDivs.ShowPanel3.panelID, "", TheURL);

// history.pushState(MyDivs.ShowPanel3.panelID, "", MyDivs.ShowPanel3.DisplayURL);

break;

case 4:

SwitchPanel(MyDivs.ShowPanel4.panelID);

history.pushState(MyDivs.ShowPanel4.panelID, "", TheURL);

// history.pushState(MyDivs.ShowPanel4.panelID, "", MyDivs.ShowPanel4.DisplayURL);

break;

}

}

function SwitchPanel(PanelID) {

if (PanelID === null) {return false;}

$('.Panel').hide();

$('#' + PanelID).fadeIn('medium');

}

panel 1

panel 2

panel 3

panel 4

Upvote if it works for you.

Enjoy!