Question

我遇到了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请求），并通过标题重定向重定向到/ items /＃/ item- [id] /。
history.js在加载后立即启动，并将用户重定向到/ item- [id] /

我正在使用history.js的HTML5版本（我认为不应该像这样，dunno），只要加载了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，这是一个纯HTML5版本的history.js，没有任何框架绑定：https://github.com/browserstate/history.js/blob/master/scripts/bundled-uncompressed/html5/native.history.js

它说明了没有任何重定向的要点。只要您点击任何链接，您就会在hash.js之后重定向到URL。

Answer 1

我决定直接修改history.js并添加一个选项preventHashRedirect

-
#1820 // if (currentState ) {

+
#1820 // if (!History.options.preventHashRedirect && currentState ) {

解决了这个问题。（基本上哈希变化不被视为popstates并且不会触发状态变化）。

可能更改isTraditionalAnchor函数（确定什么被视为锚点以及＃后面的URL）来处理以!开头的所有哈希值是更好的主意。

-
#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导致重定向。

以下@Martin Barker的想法仍然有效，尽管添加额外的重定向让我觉得有点......粗糙。

Answer 2

已删除 - 因为您无法使用History.js，因为您将更改系统中可能导致无法解决问题的核心功能。

你最好自己制作自己的jQuery，这很简单

a.html

<a href="b.html" class="hashlink">B</a>

b.html

<a href="a.html" class="hashlink">A</a>

这将在窗口上提供HTML5 .onhashchange事件。

// support onhashchange for browsers without support
(function(w, l, u){
    'use strict';
    if(w.onhashchange == u ){
        w.onhashchange = function(curr, old){};
        w.oldHash = l.hash.replace("#", "");;
        w.onhashchangeCheck = function(){
            var hash = l.hash.replace("#", "");
            if(hash != w.oldHash){
                w.onhashchange(hash, w.oldHash);
                w.oldHash = hash;
            }
        }
        setInterval(w.onhashchangeCheck, 100);
    } 
})(window, document.location);

这显示了如何使用onhashchange并设置任何<a></a>个标记，使用类hashlink来更改哈希值，而不是重定向浏览器

// handle using hash changes
(function($, w, l, d, u){
    'use strict';

    w.onhashchange = function(new, old){
        // this should handle loading your content via ajax
        // on $.ajax().success should handle reading the file into the
        // content area of your sight
        alert("hash has said you want to load '"+new+"'");
    }

    $(d).ready(function(){
        $('a.hashlink').on('click', function(e){
            l.hash = $(this).attr('href');
            e.preventDefualt(); // jQuery stop the a link default behavioured of redirecting
            //return false; // legacy jQuery support if you need it for the above
        });
    });
})(jQuery, window, document.location, document);

请注意javascript中有更接近函数的au但是我没有为该变量的函数提供参数这是故意创建一个ture undefined结果包含你的一些代码有var undefined = 'something it should not'

history.js和头重定向

2 个答案: