我在使用 history.js 时遇到问题,我不知道如何解决。
在我正在处理的网站上,我们使用 history.js 在页面之间移动 - 如果您单击任何链接,history.js 会通过 AJAX 加载 URL,更新 URL 并为内容创建过渡效果。但是,我们还有包含项目的索引页面;如果您单击某个项目,则不会使用 history.js - 内容通过 ajax 加载并显示在弹出窗口中。还有一种情况是用户可以打开项目的 URL(例如在新选项卡中,或从搜索中),在这种情况下,用户应该被重定向到带有项目 URL 哈希的索引页面,这将告诉 JS 运行事件单击具有哈希 URL 的链接。然而,history.js 启动并重定向到项目 URL。
重申一下:
- 用户来到/items/URL
- 左键单击项目 (/item-[id]/URL),这会在弹出窗口中正常打开内容(AJAX 请求)
- 右键单击项目并在新标签页中打开链接
- 登陆/item-[id]/(不是 AJAX 请求),并通过 header 重定向重定向到/items/#/item-[id]/。
- history.js 在加载后立即启动并将用户重定向到/item-[id]/
我正在使用 HTML5 版本的 history.js(我认为它不应该像这样,虽然我不知道)它会在 history.js 加载后立即重定向(页面上没有其他脚本)。除了将重定向更改为/items/?/item-[id]/(我认为)应该可以解决问题之外,还有其他方法可以解决此问题。
为了说明问题:
a.html
<html>
<body>
<script type='text/javascript' src="native.history.js"></script>
<a href="b.html#/b/">b</a>
</body>
</html>
b.html
<html>
<body>
<script type='text/javascript' src="native.history.js"></script>
<a href="a.html#/a/">a</a>
</body>
</html>
使用 native.history.js
,它是 history.js 的纯 HTML5 版本,没有任何框架绑定(bind):https://github.com/browserstate/history.js/blob/master/scripts/bundled-uncompressed/html5/native.history.js
它说明了这一点,没有任何重定向。只要您点击任何链接,history.js 就会将您重定向到哈希后的 URL。
最佳答案
我决定直接修改 history.js 并添加一个选项 preventHashRedirect
-
#1820 // if (currentState ) {
+
#1820 // if (!History.options.preventHashRedirect && currentState ) {
解决了这个问题。 (基本上哈希更改不被视为 popstates,不会触发状态更改)。
可能会改变 isTraditionalAnchor
函数(确定什么被视为 anchor 以及# 之后的 URL)来处理所有以 !
开头的哈希值会是一个更好的主意。
-
#1052 // var isTraditional = !(/[\/\?\.]/.test(url_or_hash));
+
#1052 // var isTraditional = /^!/.test(url_or_hash) ? true : !/[\/\?\.]/.test(url_or_hash);
这样您实际上可以防止 history.js 影响任何以 !
开头的重定向. (例如,如果您实际上有一个名称为 my.puppy
的 anchor ,则执行 <a href='#!my.puppy'>
不会导致通过 history.js 进行重定向。
@Martin Barker 的以下想法仍然有效,尽管添加额外的重定向让我觉得有点……粗鲁。
关于javascript - history.js 和标题重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24757216/