javascript - chrome 中的 jquery hashchange 问题 32.0.1700.76 m

Question

我刚刚更新到 chrome 版本 32.0.1700.76 m，现在我注意到 hashchange 似乎表现得很奇怪。有时有效，有时无效。

我的主页上有如下代码，我已经几个月没改代码了。几天前工作正常(在我更新到最新的 chrome 版本之前):

$(window).on('hashchange', function () {
    var page = location.hash.slice(1);

    $('[data-page]').addClass('hidden');

    $('[data-page=' + page + ']').css('z-index', '0');
    $('#1st-row').children().eq(0).css('z-index', '1');
    $('#1st-row').children().eq(1).css('margin-left', '-200px');    
    $('[data-page=' + page + ']').removeClass('hidden');

    $('#1st-row').children().eq(1).animate(
        { 'margin-left':'0px' }, 1000);

    $(':checkbox').checkbox('check');
    $('#debug').attr('value', 'true');
});

当我重新设计我的网站时，我发现有些东西不能正常工作，所以我稍微改变了它:

$(window).on('hashchange', function () {
    var page = location.hash.slice(1);

    $('[data-page=' + page + ']').slideDown();
});

但是还是不行。 我必须多次重新加载页面，再次访问该站点(ctrl+l -> enter)，再重新加载几次，然后它神奇地工作了。虽然它不会第二次工作......在它决定让 hashchange 工作之前，我必须刷新并重新加载页面/网站几次。

您可以在 lingonsorbet.se 上进行测试。 只需将 #advanced 添加到 url，右侧就会出现一个框。在 Firefox 和 IE 中运行良好。

是我做错了什么还是其他人也遇到过这个问题？

Answer 1

hashchange不会在页面加载时触发

hashchange仅当您手动更改哈希或单击页内 anchor 链接 (<a href="#advanced">Advanced</a>) 时才会触发事件。在不更改哈希值的情况下重新加载页面不会触发 hashchange .

您应该将哈希检查代码重构为一个新函数并执行它

1. 在 hashchange 上事件
2. 在页面加载时。

考虑这段代码:

function changeLayoutByHash() {
    var page = location.hash.slice(1);
    $('[data-page=' + page + ']').slideDown();
    // etc.
}

$(window).bind('hashchange', changeLayoutByHash );

$(window).ready( changeLayoutByHash );

根据您的问题，我认为 Chrome 处理此问题的方式不一致。

如果你一直重新加载example.com#advanced , hashchange不会被解雇。仅当您将散列更改为 example.com#advance 时(删除一个字符)，它被注册为一个改变的散列。

调试

要查明某些事件是否被触发，你总是可以写一点 console.log('hashchange fired');进入您的事件处理程序，然后(打开 ChromeDev 工具)在控制台中查看您的程序执行的操作。