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的情况下工作呢？

- Björn

Answer 1

有什么办法可以不用setTimeout就能使它工作吗？

动态创建一个带有href为#yourHash的<a>标签，然后通过dispatchEvent模拟鼠标点击。

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中测试过。

- Paul S.

---

谷歌浏览器不需要这个，对吧？Chrome为每个location.hash更改创建历史记录“条目”...或者只有在onload中才会创建历史记录？ - Rudie

这个问题涉及到页面加载时间，在此期间 location.hash 通常不会更新历史记录。 - Paul S.

实际上，即使在Chrome的document ready或window onload中，它也不会运行/创建历史记录条目。我只需要在IE中使用它，在那里它可以在document ready中工作。 - Björn