Webflow中Finsweet CMS Sort自动排序失效问题求助

问题背景 #

在Webflow搭建的网站首页使用了Finsweet的CMS Combine和CMS Sort功能，设置了一个隐藏按钮，想要页面加载时自动触发它，让首页内容按名称排序。当前脚本初次加载时有效，但多次导航返回首页后，脚本失效，内容不再按名称排序。

当前使用的脚本：

<script>
window.onload=function(){
document.querySelector(".fs_cmssort_button").click();
};
</script>

问题原因 #

Webflow采用类单页应用的导航机制（PJAX），从其他页面返回首页时，页面不会完全刷新，仅局部更新DOM，因此window.onload事件不会再次触发，导致原脚本只在首次加载时执行，后续导航返回时无法生效。

解决方案 #

1. 改用Webflow专属页面切换事件监听 #

替换原有的window.onload，同时监听首次加载和Webflow页面切换完成的事件：

<script>
function triggerSort() {
  const sortBtn = document.querySelector(".fs_cmssort_button");
  if (sortBtn) {
    sortBtn.click();
  }
}

// 首次页面加载完成时执行
document.addEventListener("DOMContentLoaded", triggerSort);
// Webflow页面切换完成后执行
window.addEventListener("wf:after-page-load", triggerSort);
</script>

2. 针对动态生成元素的延迟优化 #

如果排序按钮是CMS Combine动态生成的，可能需要短暂延迟确保元素已渲染完成：

<script>
function triggerSort() {
  setTimeout(() => {
    const sortBtn = document.querySelector(".fs_cmssort_button");
    if (sortBtn) {
      sortBtn.click();
    }
  }, 100); // 延迟100ms，可根据实际调整时长
}

document.addEventListener("DOMContentLoaded", triggerSort);
window.addEventListener("wf:after-page-load", triggerSort);
</script>

3. 验证元素选择器正确性 #

检查按钮类名是否准确，Finsweet的CMS Sort按钮类名可能为fs-cmssort-button（注意连字符和下划线的区别）。可以在浏览器控制台输入document.querySelector(".fs_cmssort_button")，如果返回null，说明类名错误，需要修正为正确的选择器。

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