个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我一直在阅读有关 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.
我知道有 history.js 插件，但我想了解 API 如何以最简单的形式工作。
希望 jsfiddle 能帮助到此页面寻找代码演示的其他人。
谢谢。
最佳答案
好的，我为你做了这个例子。从 HTML 代码 (index.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 menu, url, description, action, data, historyState, act;
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
每次单击 anchor 时，都会将一个新的历史实例插入历史堆栈并保存一个对象(称为状态):本地 url 已更改但加载会被“event.preventDefault()”停止方法。此外，一些信息(如 URL、描述和操作)已更新。
然后，使用“后退”和“前进”按钮，您可以浏览历史并使用“history.state”(或 event.state 或 window.event.state，取决于浏览器)检索当前状态.
最后，如果你直接在地址栏中输入整个 url，它的工作原理与上面的 .htaccess 相同;)
希望这个例子对你有帮助;)
再见
威尔克
PS: 更多详情:
关于javascript - HTML5 历史 API 演示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10571734/
25
4
0
背景 之前陆续写过一些和 OpenTelemetry 相关的文章： 实战：如何优雅的从 Skywalking 切换到 OpenTelemetry 实战：如何编写一个 OpenTeleme
我很困惑PSReadLine历史在 Powershell 中跨 session 工作。我可以在 PS 版本 5.1 中看到我以前的命令历史记录自动存储在 %userprofile%\AppData\R
我有一个实体，我正在从面板中保存我们的数据库，您可以在其中执行常规操作(编辑、添加等)。不是很大，大多数时候大约有 1k 行，而且这个数字可能总是在这个左右。该实体有一些与其他实体相关的字段(例如:位
有时有人想直接在环境中更改 crx 中的内容。 这通常是环境不工作状态的原因。而且往往很难找到问题的原因。而且我认为如果 cq5 crx 有审计日志会很有帮助。像这样。 12.12.12 21:03
这个问题与可以在其他问题之一中找到的模式有关here.基本上在数据库中，我存储用户，位置，传感器等。所有这些内容都可以由用户在系统中编辑，并且可以删除。 但是-在编辑或删除项目时，我需要存储旧数据；我
我需要随时跟踪许多项目及其状态。 例子 ItemId Location DateTime State 1 Mall A 2010-02-03 07:00 on
我有这个方法来添加 fragment : public void addFragmentOnTop(Fragment fragment) { getSupportFragmentManager()
我想了解 HTML5 历史对象。这是我开始的一个简单示例。 function addDialog(){ document.getElementById('d').style.
我如何使用 HTML5 history api。我确实通过了https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
我正在尝试找出在关系数据库中保存表的历史记录/修订的最佳方法。 我进行了一些研究和阅读，但不确定跟踪更改的最佳方式是什么。对于我的主表，我很确定我已经确定了一个修订表，以保持跟踪(见图)，但我不确定是
这个问题在这里已经有了答案: Git: discover which commits ever touched a range of lines (6 个答案) 关闭 9 年前。 我一直在研究 gi
我有一个相当复杂的程序(带有 SWIG'ed C++ 代码的 Python，长期运行的服务器)，它显示了不断增长的常驻内存使用量。我一直在使用常用的泄漏工具(valgrind、Pythons gc 模
我的 Git 存储库中有一行包含单词“Foo”的数百次提交。 是否有任何方法可以在上次的位置找到它的修订号？ 最佳答案 这可以通过 -S 的镐 ( gitlog ) 选项来解决。 git log -
我不小心删除了一个文件(我不是他的创建者)并提交并将其推送到远程。现在我想让 git 取消删除此更改，但是当我使用 git revert #mistaken commit 时，它可以工作，但指责信息指
我使用 spyder 历史 Pane 查看我过去尝试过的命令，但最近我注意到它不会在我键入命令时更新。屏幕截图 1 显示了控制台和历史记录 Pane ，因为您可以看到历史记录中没有显示任何控制台条目。
我的应用程序使用 Camunda 7.7 运行。到目前为止，所有数据都保存在 Camunda 表 (ACT_XXX) 中——它们变得很大。所以现在我想清理表格并配置 Camunda，以便在 14 天后
我在 SVN 上有一个这样组织的旧项目: /一些/子目录/a/trunk/foo /一些/子目录/b/trunk/foo /一些/子目录/c/trunk/foo 我使用GitHub工具git-impo
我有一个通用的工作功能，为此我将使用 GNU Radio 的历史记录功能。在 block 的构造函数中，我调用了 set_history( m )。我以标准方式转换输入缓冲区: const flo
当我加载 php 页面时，我会附加一些数据。例如 MyPage.php?value=something。正如预期的那样，当我使用后退按钮来回移动时，它总是会加载附加的相同数据。我不想那样。我希望在页面
我们有一个相当大的库，我们需要定期将其导入(然后修补)到我们的代码库中。 SVN Book 似乎推荐了一个“vendor branch”方案，我们保留了“vendor drops”的补丁版本。这会起作
我是一名优秀的程序员,十分优秀！