HTML5历史API演示 [英] HTML5 History API Demo
问题描述
我一直在阅读关于HTML5历史API的内容，到目前为止，我还没有找到一个简单的工作演示，其中显示了带代码的机制。
I've been reading about the HTML5 history API and so far, I haven't found a simple working demo that shows the mechanics with code.
这是一个有效的 jsfiddle ：4个按钮和4个div。当用户按下按钮时，它显示了相应的面板。
Here is a working jsfiddle: 4 buttons and 4 divs. When the user presses a button, it shows the corresponding panel.
我要做的是：
1) rewrite the URL so that when the user is on panel 4 the url ends with /Panel4
2) make the back button and forward button work with the history API.
我知道有history.js插件，但我想了解API是如何工作的最简单的形式。
I know there's the history.js plug-in but I want to understand how the API works in its simplest form.
希望jsfiddle能帮助其他人来这个页面寻找代码演示。
Hopefully, the jsfiddle will help others who'll come to this page looking for a code demo.
谢谢。
推荐答案
好的，我创建了我认为的SIMPLEST形式的历史API演示。
它不能在jsfiddle中工作，因为它需要在自己的窗口中运行。它会工作，如果你复制粘贴在记事本中的代码，在指定的位置添加对jquery的引用，并将它作为html文件保存在桌面上。当然，它在IE中不起作用，但我们都知道。
我已经有两个版本：一个没有URL重写组件的版本（它可以在桌面上运行），我还注释了你可以操作URL的版本。对于后者，您需要从远程或本地服务器运行它。
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.
我很难让它在所有浏览器中运行，因为Chrome，Safari和Firefox工作不同！以下是代码：
I've struggled to get it working across all browsers because Chrome, Safari and Firefox work differently! Here's the code:
<html>
<head>
<style type="text/css">
.Panel{
width:200px;
height:100px;
background:red;
display:none;
color:white;
padding:20px 20px;}
.ChangeButton{
margin:10px 10px;
float:left;}
</style>
// add reference to jquery.js file here
// <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
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');
}
</script>
</head>
<body>
<input type="button" id="Button1" class="ChangeButton" value="panel 1" />
<input type="button" id="Button2" class="ChangeButton" value="panel 2" />
<input type="button" id="Button3" class="ChangeButton" value="panel 3" />
<input type="button" id="Button4" class="ChangeButton" value="panel 4" />
<div id="PanelContainer" style="clear:both;">
<div class="Panel" id="Panel1">panel 1</div>
<div class="Panel" id="Panel2">panel 2</div>
<div class="Panel" id="Panel3">panel 3</div>
<div class="Panel" id="Panel4">panel 4</div>
</div>
</body>
</html>
Upvote如果适合您。
Upvote if it works for you.
享受！
这篇关于HTML5历史API演示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
