当URL哈希值改变时强制重新加载页面

Question

在我的应用程序中有一个头部菜单。我们有5个菜单项，具有相同的页面URL，但不同的哈希值，例如：

1. 首页（www.sample.com）
2. 品牌页面1（www.sample.com/test.html#brand1）
3. 品牌页面2（www.sample.com/test.html#brand2）
4. 品牌页面3（www.sample.com/test.html#brand3）
5. 品牌页面4（www.sample.com/test.html#brand4）

所有品牌页面都将导航到相同的页面（test.html），但哈希不同。

问题：当我从首页点击任何品牌页面链接时，页面会自动导航到test.html并检查哈希标签，并通过ajax自动加载项目。

但是，当我在品牌页面内点击任何品牌页面链接时，页面不会刷新。

- Rajasekar

---

onhashchange=location.reload.bind(location); - dandavis

谢谢@dandavis，但是这在IE中不起作用。 - Rajasekar

它可以在IE8+中工作，可能希望对于ie8使用anon而不是bind。话虽如此，重新加载每个导航似乎是一个非常糟糕的想法，并且违背了单页站点的初衷... - dandavis

你是否有特定的需求，需要改变哈希的自然行为？也许可以使用 URL 参数代替，例如 www.sample.com/test.html?brand1 或者像这样 www.sample.com/test.html?p=0#brand1。这样做就不必担心浏览器兼容性的问题了... - Maku

Answer 1

HTML:

<div id="menu">
    <a href="#1">brand 1</a>
    <a href="#2">brand 2</a>
</div>

JQ:

$(function() {

    $('#menu a').click(function(e){
        var url=$(this).attr('href');

        window.location.href=url;// ## change url with hash
        location.reload();       // ## reload page

        e.preventDefault();      // ## prevent default click action 
    })

}) 

- dm4web