history.pushState与jQuery.load联动致页面获取失败的解决方案咨询

哥们，我太懂你这种踩坑的感觉了——用pushState美化URL结果搞砸了资源加载，确实挺头疼的。咱们先把问题根源掰明白，再给你一套靠谱的实现方案。

问题根源 #

jQuery的.load()方法如果用相对路径，是基于浏览器地址栏当前显示的URL来解析路径的。你用pushState把地址栏改成了foo.com/a/b/c这种深层伪路径，浏览器就会误以为当前页面在/a/b/目录下，此时如果用相对路径调用.load()，它就会请求/a/b/dir1/dir2/p1.html这种不存在的路径，自然就失败了。

正确实现步骤 #

1. 用根相对路径指定加载资源 #

不管地址栏的伪URL是什么，直接用开头带斜杠的根相对路径来指定要加载的文件，这样路径解析永远基于网站根目录（对应你的服务器根/var/www/bar），不会受伪URL干扰。

比如：

• 加载dir1/dir2/p1.html里的#Container1，就写/dir1/dir2/p1.html #Container1
• 加载目标页面的#Container2，就写/path/to/your/page2.html #Container2（替换成实际文件的根相对路径）

2. 绑定链接点击事件，顺序处理加载与pushState #

先加载内容，再修改地址栏（或者同步处理，但要确保路径正确），示例代码：

// 处理链接1的点击
$('a.link1').on('click', function(e) {
  e.preventDefault(); // 阻止默认跳转行为
  const loadTarget = '/dir1/dir2/p1.html #Container1'; // 根相对路径的资源
  const displayUrl = '/a/b/c'; // 地址栏要显示的伪URL

  // 加载内容到目标容器（比如#main-container）
  $('#main-container').load(loadTarget, function() {
    // 内容加载完成后，修改地址栏URL
    history.pushState(
      { loadTarget: loadTarget }, // 存下实际加载路径，方便后退时用
      '',
      displayUrl
    );
  });
});

// 处理链接2的点击
$('a.link2').on('click', function(e) {
  e.preventDefault();
  const loadTarget = '/path/to/your/page2.html #Container2';
  const displayUrl = '/a/b/d';

  $('#main-container').load(loadTarget, function() {
    history.pushState({ loadTarget: loadTarget }, '', displayUrl);
  });
});

3. 处理后退/前进按钮（popstate事件） #

要实现浏览器后退/前进功能，需要监听popstate事件，根据之前存在pushState里的信息，加载对应内容：

window.addEventListener('popstate', function(event) {
  // 如果之前存了加载目标路径，直接用它加载
  if (event.state && event.state.loadTarget) {
    $('#main-container').load(event.state.loadTarget);
  }
});

4. 服务器配置（关键！） #

当用户直接在地址栏输入伪URL（比如foo.com/a/b/c）时，服务器会找不到这个路径，返回404。所以需要配置服务器把所有伪URL重定向到你的主页面（比如index.html），让JS来处理内容加载。

比如Nginx的配置：

server {
  root /var/www/bar;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

Apache的配置（需要开启mod_rewrite）：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

关于你临时解决方法的原理推测 #

你提到的两种临时方法，大概率是这两种：

• 用完整绝对URL：比如http://foo.com/dir1/dir2/p1.html #Container1，这种路径不依赖地址栏URL，自然不会出错，但硬编码域名不够灵活。
• 先加载内容再调用pushState：如果先完成.load()再修改地址栏，此时加载请求已经发送，不会受后续的伪URL影响，但本质还是没解决路径解析的问题，只是规避了时机冲突。

总结 #

核心就是始终用根相对路径指定.load()的目标，同时配合服务器的重写配置处理直接访问伪URL的情况，再加上popstate事件处理后退/前进，就能完美实现你要的功能了。

内容的提问来源于stack exchange，提问作者EML