History.js在Internet Explorer中的哈希回退和pushState问题

Question

我正在实现一个网站，通过使用History.js在前台页面通过ajax加载新的部分时动态设置其URL。

这似乎很好用，但是在Internet Explorer中，History.js创建的哈希段存在问题。

以下是页面上使用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的url重定向到http://example.com，然后javascript解析url并通过ajax请求在changeState处理程序中加载相应的部分。

Javascript会检查类似于

http://example.com/public/category_a 

对于Internet Explorer创建的等效备用URL，即AND

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

这一切都正常 - 所以：

在Firefox中，如果我打开网站根目录下的网站http://example.com，并按照上述操作单击链接，则内容会加载（在changeState处理程序中），并通过History.pushState设置URL：

http://example.com/public/category_a

如果我点击另一个链接，URL 就会被设置为，例如：

http://example.com/public/category_b

在IE浏览器中，如果我打开网站的根目录，并点击链接，如上所述，内容会加载，并且URL会设置为带有哈希的格式：

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

如果我点击下一个链接，URL 将被设置为：

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

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

http://example.com/public/category_a

如果我直接在IE中打开此URL，通过书签或将URL粘贴到浏览器地址栏中，.htaccess会成功重定向，js文件可以正确解析URL并加载内容。然而，如果我现在点击category_b链接，则URL将被History.pushState设置为：

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

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

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

然而，History.js似乎将整个先前的URL作为后续pushStates的基本URL。我尝试在History.pushState中设置绝对URL，但没有成功。如上面的代码块中所示，我有一个针对IE的特定pushState语句。我已经尝试以各种方式进行配置。我该如何让History pushState识别：

http://example.com 

作为URL的基础部分，应该将哈希部分附加到哪里？还是有比我上面描述的方法更好的方法？

- Lemmy

---

你好，你有找到解决方法吗？当页面刷新时，浏览器会加载第一个URL而不是当前的URL。 - Siddharth Pandey

你读过这个问题吗？：http://stackoverflow.com/questions/14342912/using-history-pushstate-in-ie9 也许你可以找到一些有用的提示。 - nikoskip

为什么不在 pushstate 到 public/category_a 后再“重定向”到 #，以便在 pushstate 生效时删除哈希标记呢？ - Luc Laverdure

Answer 1

据我所知，历史 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。

- curiouser