通过 jQuery 更改 URL 而无需刷新页面

在很多网页应用程序中，不需要让用户像在多个页面之间导航。相反，您可能想使用 AJAX 加载内容，并根据需要更新 URL。

在本教程中，我们将介绍如何使用 jQuery 库更改 URL 而无需刷新页面。

改变 URL 的两种方法

您可以使用两种方法来更改 URL。首先是通过使用 pushState() 方法添加一个新的历史记录条目，第二个是通过 replaceState() 方法替换当前历史记录条目。

对于这两种方法，必须先获取 URL 的协议，主机名和路径名。我们将使用 location 对象来取得这些属性。

获取 URL 信息

首先，我们需要获取当前 URL 的信息。可以使用 location 对象的属性来获取。

var protocol = window.location.protocol;
var host = window.location.host;
var path = window.location.pathname;

其中，protocol、host 和 pathname 是参数，它们将包含当前 URL 的协议、主机名和路径名。例如 https://www.example.com/page1，protocol 将包含 "https"，host 将包含 "www.example.com"，path 将包含 "/page1"。

使用 pushState() 方法添加新的历史记录条目

pushState() 方法通过添加新的历史记录条目来更改 URL。使用此方法创建的 URL 可以被浏览器书签，也可以通过历史记录 API 回退。

var url = '/page2';
var title = 'Page 2';

window.history.pushState({'path': url}, title, url);

其中，第一个参数是要添加的 state 对象，第二个参数是标题，第三个参数是新的 URL。

使用 replaceState() 方法替换当前的历史记录

replaceState() 方法使用新的 URL 替换当前的历史记录。这是有用的，因为它可以允许您更改 URL，而不会增加历史记录。

var url = '/page3';
var title = 'Page 3';

window.history.replaceState({'path': url}, title, url);

示例应用

假设您有三个页面，分别为 page1、page2 和 page3，您希望在不刷新页面的情况下切换页面并更新 URL。

下面是一个示例应用，它使用 pushState() 方法和 replaceState() 方法更改 URL。

$(document).ready(function() {
  // 加载初始页面
  $('#content').load('page1.html');

  // 点击链接时
  $('a').click(function(event) {
    var page = $(this).attr('href');
    var title = $(this).text();

    // 加载新页面
    $('#content').load(page);

    // 添加新的历史记录条目
    window.history.pushState({'path': page}, title, page);

    event.preventDefault();
  });

  // 当浏览器的后退/前进按钮被点击时
  window.onpopstate = function(event) {
    $('#content').load(event.state.path);
  };
});

总结

通过使用 pushState() 方法和 replaceState() 方法，您可以更改 URL 而不会刷新页面。这可以使用户的浏览体验更加流畅，而不必在不同的页面之间导航。