历史记录.js Internet Explorer 中的哈希回退和 pushState 问题

Question

我正在实现一个网站，当新部分通过ajax加载到首页时.js它使用历史记录动态设置其网址。

这似乎工作得很好，但是历史记录.js在Internet Explorer中创建的URL中的哈希部分存在问题。

以下是使用 jquery 创建的页面上的链接示例：

    function connect_browse_buttons(){
    $('.browselink').each(function(){
        $(this).click(function(){
            var action = $(this).attr('name');
            action = action.substring( ('action_browse').length );
            browsetype = action;
            if (isIE){
                // remove data object and title to avoid use of SUIDs by History.js in IE
                History.pushState(null, null, '/public/' + action);
            } else {
                History.pushState({oldurl: History.getState()['url']}, "Example " + action, config.wwwroot + "public/" + action);
            }
            return false;
        });
    });
}

.htaccess文件将任何网址（如 http://example.com/public/category_a）重定向到 http://example.com，其中javascript解析url并通过changeStatehandler中的ajax请求加载相应的部分。

javascript 检查网址，例如

http://example.com/public/category_a 

AND 用于在 Internet Explorer 中创建的等效回退 URL，即

http://example.com/#public/category_a

一切正常 - 所以：

在

Firefox 中，如果我在网站的根目录下打开网站，http://example.com，然后按照上面点击一个链接，内容就会加载（在 changeState 处理程序中），并且 History.pushState 将 url 设置为：

http://example.com/public/category_a

如果我点击另一个链接，网址设置为，例如：

http://example.com/public/category_b

在

IE中，如果我在网站的根目录下打开网站，然后单击一个链接，如上所述，内容将加载，并且URL使用哈希设置为：

http://example.com/#public/category_a

如果我点击下一个链接，网址设置为：

http://example.com/#public/category_b

当我在IE中打开一个在Firefox中已添加书签的页面并且URL中没有哈希值时，就会出现问题。让我们以我们通常的例子为例：

http://example.com/public/category_a

如果我直接在IE中打开这个网址，通过书签或将网址粘贴到浏览器地址栏中，.htaccess重定向成功，js文件解析网址正常，内容加载。但是，现在如果我单击category_b链接，则 History.pushState 会将 url 设置为：

http://example.com/public/category_a#./category_b

我真正想要的是将网址设置为：

http://example.com/#public/category_b

但是，History.js 似乎将整个以前的 url 作为后续推送状态的基本 URL。我尝试在History.pushState中设置绝对网址，但没有成功。正如你在上面的代码块中看到的，我有一个特定于IE的pushState语句。我尝试以各种方式配置它。如何让历史记录推送状态识别：

http://example.com 

作为 URL 的基本部分，应该附加哪个哈希部分？或者有没有比我上面描述的方式更好的方法来解决这个问题？

Answer 1

> AFAIK，历史记录 API 将始终使用为初始页面加载请求的整个 URL（无哈希）。加载页面后，您可以使用历史记录 API 更改初始 URL 之后的内容，也可以使用哈希更改来更改初始 URL 之后的内容，但如果不重新加载整个页面，就无法对其进行修改。

据我所知，实现您正在寻找的唯一选择是让您的服务器将所有 URL 重定向/重写到您想要的基本 URL，然后将您的路径、文件名、参数、哈希等传递到您的客户端路由器/控制器。我必须建议不要这样做，因为（没有太多细节）在Facebook上共享的网站链接将始终http://example.com/或您的基本URL是什么。

在我看来和实践中，我不使用历史 api，而是使用哈希更改，因为它无处不在。这样做并不总是很漂亮，但我认为除了哈希之外，您还应该努力为 URL 提供适当的 Web 服务器响应。这是一个来自我的网站的特别丑陋的URL：http://www.respectfulrevolution.org/road/videos/ian_barlow_finding_our_roots_forest#/road/videos/marcy_westerling_livingly_dying，但是当加载到浏览器中时，服务器会响应您在此处看到的内容：http://www.respectfulrevolution.org/road/videos/ian_barlow_finding_our_roots_forest 然后客户端控制器加载您在此处看到的内容： http://www.respectfulrevolution.org/#/road/videos/marcy_westering_livingly_dying加载应与：http://www.respectfulrevolution.org/road/videos/marcy_westering_livingly_dying 相同