chrome 32.0.1700.76 m 中的 jquery hashchange 问题

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 添加到网址，右侧就会出现一个框。在 Firefox 和 ie 中运行良好。

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

Answer 1

hashchange 不会在页面加载时触发

hashchange 事件仅在您手动更改哈希或单击页内锚链接 (<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 工具）在控制台中查看您的程序执行的操作。