Chrome 中的 jquery hashchange 问题 32.0.1700.76 m.

Question

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

我的主页上有以下代码，我已经几个月没有更改代码了。 几天前工作正常（在我更新到最新的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 ->输入），再重新加载几次，然后它神奇地工作。不过第二次就行不通了...在它决定让哈希更改工作之前，我必须刷新并重新加载页面/站点几次。

您可以在 lingonsorbet.se 进行测试。只需将 #advanced 添加到 URL，右侧就会出现一个框。在Firefox和IE中工作正常。

是我做错了什么还是其他人也遇到了这种情况？

Answer 1

页面加载时不会触发hashchange

仅当您手动更改哈希或单击页面内锚链接 （ <a href="#advanced">Advanced</a> ） 时，才会触发 hashchange 事件。在不更改哈希的情况下重新加载页面不会触发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 工具打开的情况下）在控制台中查看程序的功能。