window.location.hash 不创建浏览器历史记录条目

Question

我正在运行一个简单的：

window.location.hash = "hash";

在页面加载后立即在 url 中添加哈希值。我明白了，mySite.com/aPage#hash。当我单击后退按钮时，我希望 url 更改回 mySite.com/aPage，而无需任何实际加载/返回。相反，我被带回到 mySite.com/aPage 之前的历史记录条目。

当我在用户触发的点击事件回调中调用 window.location.hash 时，它效果很好。

我创建了一个测试：http://jsbin.com/idukiz/1/ 查看代码：http://jsbin.com/idukiz/1/edit

只有 setTimeout 函数中添加的最后一个哈希的行为符合我的预期。有什么想法如何让它在没有 setTimeout 的情况下工作吗？

Answer 1

有什么想法如何让它在没有 setTimeout 的情况下工作吗？

使用鼠标单击的href动态创建的<a>。#yourHashdispatchEvent

window.onload = function () {
    location.hash = 'foo'; // no history item created, just to help visibility
    var a = document.createElement('a'),
        ev = document.createEvent("MouseEvents");
    a.href = '#bar'; // this will create history item
    ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(ev); // dispatch click
};

代码演示在这里。在 Google Chrome 25 中测试。