jquery - Internet Explorer 中的 History.js 哈希回退和 PushState 问题

Question

我正在实现一个网站，当通过 ajax 将新部分加载到首页时，该网站会使用 History.js 动态设置其 url。

这似乎工作得很好，但 History.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 文件重定向任何 URL，例如 http://example.com/public/category_a至 http://example.com ，其中 JavaScript 解析 url 并通过 ChangeState 处理程序中的 ajax 请求加载适当的部分。

JavaScript 检查 url，例如

http://example.com/public/category_a 

对于在 Internet Explorer 中创建的等效后备 URL，即

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

一切正常 - 所以:

在 Firefox 中，如果我在网站的根目录下打开该网站，http://example.com ，然后单击上面的链接，内容加载(在changeState处理程序中)，并且URL由History.pushState设置为:

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 中添加了书签的页面，并且网址中没有哈希值时，就会出现问题。让我们举个通常的例子:

http://example.com/public/category_a

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

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

我真正想要的是将 url 设置为:

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

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

http://example.com 

作为 url 的基础部分，哈希部分应附加到哪个部分？ 还是有比我上面描述的方法更好的方法来解决这个问题？

Answer 1

据我所知，历史 API 将始终使用初始页面加载请求的整个 URL(无哈希)。页面加载后，您可以使用历史 API 来更改初始 URL 之后的内容，也可以使用哈希更改来更改初始 URL 之后的内容，但如果不重新加载整个页面，则无法对其进行修改。

据我所知，实现您想要的目标的唯一选择是让您的服务器将所有 URL 重定向/重写到您所需的基本 URL，然后将您的路径、文件名、参数、哈希等传递给您的客户端侧面路由器/ Controller 。我必须建议不要这样做，因为(没有太多细节)您在 Facebook 上共享的网站的链接将始终指向 http://example.com/ 或任何您的基本 URL。

在我看来，在我的实践中，我不使用历史API，而是使用哈希更改，因为它在任何地方都适用。这样做并不总是很漂亮，但我认为除了哈希之外，您还应该努力为 URL 提供适当的 Web 服务器响应。这是我网站上一个特别难看的网址: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然后客户端 Controller 加载您在此处看到的内容:http://www.respectfulrevolution.org/#/road/videos/marcy_westering_livingly_dying 其加载内容应与: http://www.respectfulrevolution.org/road/videos/marcy_westering_livingly_dying 相同