history.js和头重定向 [英] history.js and header redirection
问题描述
我遇到了history.js的问题，我不知道如何处理。
I'm having problems with history.js, which I don't know how to address.
在我正在研究的网站上，我们使用history.js在页面之间移动 - 如果你点击任何链接history.js通过AJAX加载URL，更新URL并为内容创建过渡效果。但是，我们还有带有项目的索引页面;如果您单击某个项目，则使用history.js - 内容将通过ajax加载并显示在弹出窗口中。还有一种情况是用户可以打开项目的URL（例如在新选项卡中或从搜索中），在这种情况下，用户应该被重定向到带有项目URL哈希的索引页面，这将告诉JS运行事件单击具有哈希URL的链接。但是，history.js会启动并重定向到项目网址。
On the website I'm working on we're using history.js to move between pages - if you click on any link history.js loads URL via AJAX, updates the URL and creates transition effect for content. However, we've got also index page with items; if you click on an item, history.js is not used - the content is loaded via ajax and displayed within the popup. There's also a situation where user can open the URL of the item (for example in new tab, or from search), in that case user should be redirected to the index page with hash of item URL, which will tell JS to run event of clicking on a link that has the hash URL. However, history.js kicks in and redirects to the item URL.
重申：
- 用户来到/ items / URL
- 左键单击项目（/ item- [id] / URL），以弹出窗口打开内容（AJAX请求）
- 右键单击项目并在新选项卡中打开链接
- 登陆/ item- [id] /（不是AJAX请求），并重定向到/ items /＃/ item- [id] / via header redirect。
- history.js在加载后立即启动，并将用户重定向到/ item- [id] /
- user comes to /items/ URL
- left clicks on item (/item-[id]/ URL), which opens content in popup fine (AJAX request)
- right clicks on item and opens the link in new tab
- lands on /item-[id]/ (not AJAX request), and is redirected to /items/#/item-[id]/ via header redirect.
- history.js kicks in as soon as it's loaded and redirects user to /item-[id]/
我正在使用历史记录中重定向的历史重定向的历史记录中的HTML5版本的history.js（我认为不应该像这样，dunno）。加载了js（页面上没有其他脚本）。除了将重定向更改为/ items /？/ item- [id] /之外，还有其他方法可以解决此问题，我认为这应该可以解决问题。
I'm using HTML5 version of history.js (which I think shouldn't behave like this, dunno though) which redirects as soon as history.js is loaded (no other scripts on the page). Is there any other way to address this issue besides changing the redirect to /items/?/item-[id]/, which (I think) should resolve the issue.
为了说明问题：
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 ，其中是纯HTML5版本的history.js，没有任何框架绑定： https://github.com/browserstate/history.js/blob/master/scripts/bundled-uncompressed/html5/native.history.js
Using native.history.js, which is pure HTML5 version of history.js without any framework bindings found here: https://github.com/browserstate/history.js/blob/master/scripts/bundled-uncompressed/html5/native.history.js
它说明了没有任何重定向的点。一旦你点击任何链接，你就会被hash.js重定向到哈希后的URL。
It illustrates the point without any redirects. As soon as you click on any link, you're redirected by history.js to URL after the hash.
推荐答案
我'我决定直接修改history.js并添加一个选项 preventHashRedirect
I've decided to modify history.js directly and add an option preventHashRedirect
-
#1820 // if (currentState ) {
+
#1820 // if (!History.options.preventHashRedirect && currentState ) {
解决了这个问题。 （基本上哈希更改不被视为popstates并且不会触发状态更改）。
which solves the issue. (basically hash changes are not considered as popstates and don't trigger state changes).
可能更改 isTraditionalAnchor 函数（这决定了什么被认为是锚点以及＃之后的URL）来处理以！开头的所有哈希值。这将是一个更好的主意。
Probably changing isTraditionalAnchor function (which determines what is considered an anchor and what an URL after the #) to treat all hashes that begin with ! would be a better idea.
-
#1052 // var isTraditional = !(/[\/\?\.]/.test(url_or_hash));
+
#1052 // var isTraditional = /^!/.test(url_or_hash) ? true : !/[\/\?\.]/.test(url_or_hash);
这样你实际上可以防止history.js影响以开头的任何重定向！。 （例如，如果你实际上有一个名为 my.puppy 的锚，那么< a href ='＃！my.puppy'> 不会通过history.js导致重定向。
This way you can actually prevent history.js to affect any redirection beginning with !. (for example if you actually have an anchor with name my.puppy, doing <a href='#!my.puppy'> won't cause redirection via history.js.
以下@Martin Barker的想法仍然有效，但添加额外的重定向会让我感到震惊小...原油。
The below idea of @Martin Barker is still valid, though adding additional redirects strikes me as a little... crude.
这篇关于history.js和头重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
