使用返回按钮时刷新Drupal 8视图结果的实现方案

这个问题我之前帮客户处理过，核心原因是浏览器的前进后退缓存（BF Cache）以及Drupal AJAX视图默认没有同步更新浏览器历史记录导致的。当你用AJAX筛选后，页面内容更新了，但浏览器地址栏和历史记录没变化，返回时浏览器加载的是缓存的旧页面，而非最新筛选状态。下面给你几个可行的解决方案，从简单到进阶：

方案1：启用视图的AJAX URL更新功能 #

这是最省心的原生解决方案，Drupal 8视图本身就支持这个功能：

1. 打开你的视图编辑页面，切换到高级标签页
2. 找到AJAX设置区域，勾选「使用AJAX时更新URL」选项
3. 保存视图

启用后，每次筛选器提交AJAX请求时，浏览器地址栏会自动带上筛选参数（比如?field_category=1&field_price=50），同时历史记录也会更新。当你跳转页面再返回时，浏览器会读取URL里的参数，视图会自动加载对应的筛选状态和结果，无需手动刷新。

方案2：自定义JS同步历史记录与筛选状态 #

如果原生选项满足不了你的需求（比如不想让URL显示太多参数），可以用自定义JavaScript来手动管理历史记录和筛选状态：

1. 在你的自定义模块或主题里创建一个JS文件（比如view-filter-history.js）
2. 添加以下代码（记得替换掉视图表单的ID）：

(function ($, Drupal) {
  Drupal.behaviors.viewFilterHistory = {
    attach: function (context, settings) {
      // 替换成你的视图暴露表单ID，可通过浏览器开发者工具查看
      const $filterForm = $('#views-exposed-form-YOUR-VIEW-MACHINE-NAME-page-1', context);
      if (!$filterForm.length) return;

      // 监听AJAX提交完成事件，更新历史记录
      $filterForm.on('ajaxComplete', function (event, xhr, settings) {
        const formData = $filterForm.serialize();
        const newUrl = window.location.pathname + '?' + formData;
        // 用pushState添加新的历史记录条目
        history.pushState({filterData: formData}, '', newUrl);
      });

      // 监听浏览器前进/后退事件，恢复筛选状态
      $(window).on('popstate', function (event) {
        if (event.originalEvent.state && event.originalEvent.state.filterData) {
          const params = new URLSearchParams(event.originalEvent.state.filterData);
          // 把历史记录里的参数回填到筛选表单
          params.forEach((value, key) => {
            $filterForm.find(`[name="${key}"]`).val(value);
          });
          // 手动触发视图的AJAX刷新
          if (Drupal.views.instances.length > 0) {
            Drupal.views.instances[0].ajaxView.ajaxSubmit();
          }
        }
      });
    }
  };
})(jQuery, Drupal);

3. 在你的主题*.info.yml或模块*.libraries.yml里引入这个JS文件，确保它能加载到视图页面。

方案3：调整视图缓存与浏览器缓存设置 #

有时候视图的缓存策略会干扰状态恢复，你可以做以下调整：

• 视图缓存设置：在视图编辑页面的高级标签页，把「缓存」选项设为「每用户」或「基于请求参数」，这样不同的筛选参数会生成不同的缓存版本，避免返回时加载旧缓存。
• 禁用浏览器BF缓存：针对视图页面添加Cache-Control响应头，阻止浏览器缓存页面。可以通过自定义模块的hook实现：

function YOUR_MODULE_NAME_page_attachments_alter(array &$attachments) {
  // 替换成你的视图路由名称，格式为view.视图机器名.显示ID
  if (\Drupal::routeMatch()->getRouteName() === 'view.YOUR_VIEW_MACHINE_NAME.page_1') {
    $attachments['#cache']['max-age'] = 0;
    $attachments['#cache']['contexts'][] = 'url.query_args';
    // 设置HTTP缓存头
    \Drupal::response()->setHeader('Cache-Control', 'no-store, no-cache, must-revalidate');
  }
}

额外注意事项 #

• 确保所有筛选器都正确勾选了「记住用户的选择」选项，存储方式选择「会话」（适合匿名用户）或「用户」（适合登录用户）。
• 测试时记得清除浏览器缓存，避免旧的缓存影响测试结果。

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