HTML5 历史 API 演示
HTML5 History API Demo
我一直在阅读有关HTML5历史API的信息,到目前为止,我还没有找到一个简单的工作演示来展示代码的机制。
这是一个有效的jsfiddle:4个按钮和4个div。当用户按下按钮时,它会显示相应的面板。
我想做的是:
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.
我知道有历史.js插件,但我想了解 API 如何以最简单的形式工作。
希望 jsfiddle 能帮助其他来到此页面寻找代码演示的人。
谢谢。
好的,我为你做了这个例子。从 HTML 代码(索引.html(开始:
<!DOCTYPE html>
<html>
<head>
<title>Stackoverflow</title>
<script type="text/javascript" src="sof.js"> </script>
</head>
<body onLoad="load();">
<ul id="menu">
<li><a href="/home">home</a></li>
<li><a href="/about">about</a></li>
<li><a href="/blog">blog</a></li>
<li><a href="/photos">photos</a></li>
</ul>
<button onclick="back ();">Back</button>
<button onclick="ff ();">Forward</button>
<div>
Action: <span id="action"></span><br/>
Url: <span id="url"></span><br/>
Description: <span id="description"></span>
</div>
</body>
</html>
然后是javascript文件(sof.js(:
var 菜单, 网址, 描述, 操作, 数据, 历史状态, 行动;
function $ (id) {return document.getElementById (id);}
// Updates infos
function update (state) {
action.innerHTML = act;
url.innerHTML = state.url;
description.innerHTML = state.description;
}
// Goes back
function back () {
act = 'Back';
history.back ();
}
// Goes forward
function ff () {
act = 'Forward';
history.forward ();
}
function load () {
menu = $ ('menu');
url = $ ('url');
description = $ ('description');
action = $ ('action');
// State to save
historyState = {
home: {
description: 'Homepage'
} ,
about: {
description: 'Infos about this website'
} ,
blog: {
description: 'My personal blog'
} ,
photos: {
description: 'View my photos'
}
};
// This is fired when history.back or history.forward is called
window.addEventListener ('popstate', function (event) {
var hs = history.state;
if ((hs === null) || (hs === undefined)) hs = event.state;
if ((hs === null) || (hs === undefined)) hs = window.event.state;
if (hs !== null) update (hs);
});
menu.addEventListener ('click', function (event) {
var el = event.target;
// Prevents url reload
event.preventDefault ();
// Handles anchors only
if (el.nodeName === 'A') {
// Gets url of the page
historyState[el.innerHTML].url = el.getAttribute ('href');
// Creates a new history instance and it saves state on it
history.pushState (historyState[el.innerHTML], null, el.href);
act = 'Normal navigation';
update (historyState[el.innerHTML]);
}
});
// Handles first visit navigation
var index = location.pathname.split ('/');
index = index[index.length-1];
if (index !== '') {
historyState[index].url = location.pathname;
history.pushState (historyState[index], null, location.pathname);
act = 'First visit';
update (historyState[index]);
}
}
以及用于直接请求的 .htaccess:
RewriteEngine On
RewriteRule ^home$ ./index.html
RewriteRule ^about$ ./index.html
RewriteRule ^blog$ ./index.html
RewriteRule ^photos$ ./index.htm
每次单击锚点时,都会将一个新的历史记录实例推送到历史记录堆栈上,并随之保存一个对象(称为状态(:本地 url 被更改,但加载由 'event.preventDefault((' 方法停止。此外,还会更新一些信息(如 URL、描述和操作(。
然后,使用"后退"和"前进"按钮,您可以浏览历史记录并使用"history.state"(或event.state或window.event.state,这取决于浏览器(来检索当前状态。
最后,如果您直接在地址栏中输入整个 url,它的工作方式与上述 .htaccess ;)
我希望这个例子能帮助你;)
再见
威尔克
PS:有关更多详细信息:
- 操纵浏览器历史记录
- 历史记录对象
- 历史操作方法
好的,我创建了我认为最简单的历史 API 演示形式。
它不能在jsfiddle中工作,因为它需要在自己的窗口中运行。但是,如果您在记事本中复制粘贴代码,在指示的地方添加对 jquery 的引用,并将其作为 html 文件保存在桌面上,它将起作用。当然,它在IE中不起作用,但我们都知道。我输入了两个版本:一个在没有 URL 重写组件的情况下工作(它可以在您的桌面上工作(,我还注释掉了您可以操作 URL 的版本。对于后者,您需要从远程或本地服务器运行它。
我一直在努力让它在所有浏览器上运行,因为 Chrome、Safari 和 Firefox 的工作方式不同!代码如下:
<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>
如果它适合您,请投赞成票。
享受!
- 如何更改bigquery API中的计费层选项
- Amazon S3 REST API大小不正确
- 客户端服务器REST API captcha实现
- 使用Facebook live API创建实时视频对象时的隐私设置
- 谷歌放置API:按国家或餐馆名称搜索餐馆
- MeteorJS:在带有回调的vzaar api上正确使用wrapAsync
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- API密钥使用和检查示例
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 任何方式使AJAX调用Gmail API,而无需通过JS库
- 谷歌地图JS API+JSON-多个标记没有显示
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 如何在 API 调用后和 if 语句中启用提交按钮
- 与运行长作业(javascript,node.js)的第三方API同步的最佳实践
- 搜索api在mac上显示对话框
- Backbone.js restful json API design
- 标记的实时更新,无需加载页面谷歌地图API V3
- 使用播放按钮和/或元数据API(Spotify)进行现场演示
- HTML5 历史 API 演示
- 使用jQuery和Ajax的Twitter搜索API -如何检索数据,因为我的演示没有显示结果