Question

我的DNS托管将域名指向我的网站（Stealth forward），因此我网站上显示的域名就像www.mydomain.com，我的网站基于SPA（单页）设计，页面通过片段访问像（＃home，＃about等）的标识符。

问题是转发是隐身的，因此浏览器中的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 plugin。这样做有很多好处，包括用户可以在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
    });

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

1 个答案: