history.pushState URL与jquery的交互导致页面获取失败？

Question

我正在使用history.pushState设置URL，而同时使用jquery .load实际加载页面内容。我是历史API的新手，但我了解这是在动态站点中获取后退按钮/ etc功能的常规方法。

[问题是我在pushState中设置的欺骗性地址在获取页面时被.load以某种方式使用，这意味着.load试图获取不存在的页面，因此失败。 DocumentRoot位于服务器上的/var/www/bar。在此示例中，用户尝试在服务器上单个html文件中的两个点之间导航，该文件位于服务器上dir1/dir2/p1.html下的DocumentRoot。

当用户单击链接1时，服务器应返回dir1/dir2/p1.html #Container1，并且地址栏应显示foo.com/a/b/c
当用户单击链接2时，服务器应返回dir1/dir2/p1.html #Container2，地址栏应显示foo.com/a/b/d

那么我该怎么做呢？这是我尝试使用相对URL的方法，但失败了：

$("#mainContent").load("dir1/dir2/p1.html #container1");  // good: XHR fetch foo.com/bar/dir1/dir2/p1.html
history.pushState(null, null, "a/b/c");                   // good: shows 'foo.com/a/b/c' as the URL
...
$("#mainContent").load("dir1/dir2/p1.html #container2");  // bad: XHR fetch foo.com/bar/a/b/dir1/dir2/p1.html
history.pushState(null, null, "a/b/d");                   // bad: shows 'foo.com/a/b/a/b/d' as the URL

这是当我使用绝对URL时发生的事情：

$("#mainContent").load("/dir1/dir2/p1.html #container1");  // good: XHR fetch foo.com/bar/dir1/dir2/p1.html
history.pushState(null, null, "a/b/c");                    // good: shows 'foo.com/a/b/c' as the URL
...
$("#mainContent").load("/dir1/dir2/p1.html #container2");  // bad: XHR fetch foo.com/a/b/dir1/dir2/p1.html
history.pushState(null, null, "a/b/d");                    // good: shows 'foo.com/a/b/d' as the URL

请注意，绝对路径甚至更糟，因为XHR提取甚至不再使用DocumentRoot（bar）。谢谢。

编辑1

在Chrome / Windows和Firefox / Linux上经过测试的相对案例，结果相同；绝对大小写仅在Firefox / Linux上测试过。

编辑2

我一直在尝试，并找到了两种方法来解决此问题，但是我不太了解发生了什么，因此我不会将其发布为答案：

将history设置的所有URL保留一层，因此a/b/c变为a-b-c。我在历史API上搜索过的所有内容仅显示了一级深度的URL，所以这很常见
向站点的base（<head>]添加<base "href=http://example.com/" target="_blank">标签>

我正在使用history.pushState设置URL，同时使用jquery .load实际加载页面内容。我是历史API的新手，但我知道这是获取...