使用jQuery开发SPA时，如何检测地址栏手动URL变更？

1. 页面初始化时解析URL参数自动触发搜索 #

手动修改地址栏URL并回车后，浏览器会强制刷新页面，所以核心逻辑是在页面加载完成后立即读取URL中的查询参数，自动执行搜索。你之前说$(document).ready()无效，大概率是代码写法或引入问题，以下是正确实现：

$(document).ready(function() {
  // 解析URL中的查询参数，兼容?q和?query两种格式
  const urlParams = new URLSearchParams(window.location.search);
  const query = urlParams.get('q') || urlParams.get('query');
  
  if (query) {
    // 把查询词填充到搜索框
    $('#search-input').val(query);
    // 拉取并渲染结果
    loadSearchResults(query);
  }
});

// 封装搜索请求与渲染逻辑
function loadSearchResults(query) {
  // 用fetch API请求搜索接口
  fetch(`/your-search-api?query=${encodeURIComponent(query)}`)
    .then(res => res.json())
    .then(data => {
      renderResults(data);
      // 更新浏览器历史状态，避免刷新丢失当前查询
      history.pushState(
        { query: query },
        `搜索：${query}`,
        `/?q=${encodeURIComponent(query)}`
      );
    })
    .catch(err => console.error('搜索请求失败：', err));
}

// 示例：渲染搜索结果到页面
function renderResults(results) {
  const $container = $('#results-container');
  $container.empty();
  
  if (results.length === 0) {
    $container.html('<p>未找到匹配结果</p>');
    return;
  }
  
  results.forEach(item => {
    const $resultItem = $('<div class="result-card"></div>');
    $resultItem.html(`<h3>${item.title}</h3><p>${item.summary}</p>`);
    $container.append($resultItem);
  });
}

2. 监听浏览器前进/后退事件 #

用popstate事件处理浏览器导航，确保前进后退时能同步更新搜索内容：

$(window).on('popstate', function(e) {
  const state = e.originalEvent.state;
  if (state && state.query) {
    $('#search-input').val(state.query);
    loadSearchResults(state.query);
  } else {
    // 回到无查询的初始状态
    $('#search-input').val('');
    $('#results-container').empty();
    history.replaceState({}, document.title, '/');
  }
});

3. 处理搜索提交，用History API实现无刷新导航 #

当用户提交搜索时，阻止表单默认刷新行为，改用AJAX请求并更新URL：

$('#search-form').on('submit', function(e) {
  e.preventDefault();
  const query = $('#search-input').val().trim();
  if (query) {
    loadSearchResults(query);
  }
});

关于手动修改URL的说明 #

非哈希URL手动修改后回车必然会触发页面刷新，这是浏览器的默认行为，包括qwant在内的网站都是如此——刷新后通过页面初始化逻辑解析参数执行搜索，不存在“不刷新检测手动URL修改”的可能（除非用哈希路由，但你明确要求非哈希URL）。

排查之前事件无效的原因 #

你提到$(document).ready()、window.load无效，常见问题：

• jQuery未正确引入（比如路径错误、在DOM加载后才引入）
• 代码写在jQuery引入之前，导致无法识别$
• 代码存在语法错误，可通过浏览器控制台查看报错信息

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