Question

所以我希望我的页面在窗口的哈希值发生变化时加载内容。

使用Mootools，这非常简单：

$extend(Element.NativeEvents, {
    hashchange: 1
});

然后：

window.addEvent('hashchange', function() {});

但是，加载页面时会触发hashchange事件，即使规范要求在页面加载完成之前不要触发它！

除非我第一次加载页面，没有哈希，否则所有内容都按预期工作。

我认为这里的问题是浏览器认为页面加载“完成”，然后运行其余的JavaScript，其中包括哈希检测以加载必需的页面。

例如，如果我输入http://foo.bar/，一切都会正常工作。但是，http://foo.bar/#test理想情况下会加载初始页面，检测哈希值并加载“测试”内容。

不幸的是，浏览器会加载初始页面，将其视为“domready”，然后加载“test”内容，然后触发onHashChange。糟糕？

这导致无限循环，除非我特别要求浏览器在onHashChange事件触发时不更新散列。这很简单：

var noHashChange;
noHashChange = true;
var hashes = window.location.hash.substr(1).split("/"); // Deciphers the hash, in this case, hashes[0] is "test"
selectContent(hashes[0]); // Here, selectContent would read noHashChange, and wouldn't update the hash
noHashChange = false;

所以现在，在页面加载后更新哈希将正常工作。除了它仍然坚持初始页面加载并获取内容大约3或4次，因为它一直检测哈希已经改变。凌乱。

我认为这可能与我如何设置哈希有关，但我想不出更好的方法，除了：

window.location.hash = foobar;

...在选择新内容时运行的函数内部。

问题在于，是吗？页面已加载，然后加载内容（如果有内容）...

我希望自己能够连贯一致......

Answer 1

也许您可以先检查哈希以消除递归：

 if(window.location.hash != foobar){ window.location.hash = foobar;}

为什么onHashChange处理程序仍然会改变哈希？如果在加载内容之前有一些默认选择它，那么也许这可能是单独的功能。

（我之所以这么说是因为看起来你的某个目录结构式会议对你的location.hash'es，也许你在选择根目录时选择树的特定叶子？或者什么？）

Answer 2

你可以为哈希对象实现一个观察者，它会在has对象发生变化时触发一个函数。它与页面的实际加载无关。最好的方法是通过Object.prototype.watch
查看相同主题的其他页面：On - window.location.hash - Change?

Answer 3

如果新的html5历史api不可用，请查看MooTools History它实现onhashchange，不需要重新发明轮子：）

onHashChange在onLoad上运行......尴尬

3 个答案: