javascript - 使用 Javascript 显示哈希（或片段标识符）

Question

我的 DNS 托管将一个域指向我的网站（隐身转发），因此在我的网站中显示的域是这样的www.mydomain.com，我的网站基于 SPA（单页）设计，并且通过片段标识符（如#home、#aboutus）访问页面， ETC）。

问题是转发是隐蔽的，因此浏览器中的 URL 在导航到页面时不会显示哈希值。

我如何用 Javascript 处理这个问题？如何在浏览器 URL 中创建哈希（#home、#aboutus）？

这可以用普通的 JS 轻松完成，还是我需要 jQuery？

Answer 1

以下是我在 SPA 中管理链接的方式：

每个锚标记（或按钮）都会像这样得到明确的哈希：

<a href="#action=doSomething&param1=5&param2=10">My Title</a>

您可以像这样轻松地生成上面的哈希：

var urlHash = "#" + $.param({ action:"doSomething", param1: 5, param2: 10});

我根本没有将任何事件处理程序附加到这些锚点。它们实际上只是 HTML 中的普通锚。相反，我使用委托事件来捕获 hashchange 事件。一种非常简单的方法是使用JQuery BBQ 插件。这样做有很多好处，包括您的用户可以在 SPA 中为片段添加书签或在电子邮件中发送这些 URL，因为它们像普通 URL 一样显示在浏览器中。它们还会进入历史记录，因此用户可以像普通网站一样使用后退和前进按钮。

这是监听 hashchange 事件的示例代码，只要用户点击上面的锚点就会触发：

    //Global event handler for hash change for above type of anchors
    $(window).bind("hashchange", function (e) {
        var action = e.getState("action");
        if (action === "doSomething") {
            var param1= e.getState("param1");
            var param2= e.getState("param2");

            doSomething(param1, param2);
        }
        //else ignore unknown state
    });