Rails问题：浏览器返回按钮触发页面元素重复

你的问题大概率是浏览器的**往返缓存（Back-Forward Cache，简称BF Cache）**导致的——这是主流浏览器默认启用的性能优化机制，会缓存页面的完整状态（包括DOM结构、JS上下文甚至滚动位置），当用户点击返回按钮时直接从缓存恢复页面，而非重新请求服务器或触发常规的页面加载事件。

你提到返回时创建元素的JS代码没触发，但元素仍重复，核心原因是：BF Cache恢复的是你第一次访问页面时已经添加过元素的DOM状态，而如果页面在返回时（比如缓存策略冲突）同时加载了初始空白DOM，两者叠加就会出现重复；或者更常见的是，BF Cache直接恢复了带有已添加元素的页面，而你的JS逻辑没有检查元素是否已存在，在页面隐性触发渲染时又执行了一次添加操作。

下面是针对性的解决方案：

1. 封装添加逻辑，增加存在性检查 #

先把创建元素的代码封装成独立函数，利用你已设置的唯一ID，在添加前先判断元素是否已存在，避免重复执行：

function addTemplateFields() {
  // 检查目标元素是否已存在，存在则直接退出
  if (document.getElementById('pattern_html_block_id_field')) {
    return;
  }

  const theFieldset = document.getElementsByTagName("fieldset")[0];
  const editForm = document.getElementById("edit_pattern");
  theFieldset.innerHTML += "<div class='form-group control-group belongs_to_association_type pattern_field ' id='pattern_html_block_id_field'><label class='col-sm-2 control-label' for='pattern_pattern_html_block'>Attach template</label><div class='controls col-sm-10' data-children-count='2'><select data-filteringselect='true' placeholder='Search' name='email[pattern_id]' id='pattern_pattern_html_block' style='display: none;'><option value=''></option></select><span class='help-block'>Optional. </span></div></div><div class='form-group control-group belongs_to_association_type pattern_field ' id='pattern_pattern_field' style='display:none'><label class='col-sm-2 control-label' for='currentTemplate'>Current template</label><div class='controls col-sm-10' data-children-count='2'></div><br><label class='col-sm-2 control-label' for='pattern_pattern_html_block'>Attach template</label><div class='controls col-sm-10' data-children-count='2'></div></div>";
}

2. 监听pageshow事件处理BF Cache恢复 #

常规的DOMContentLoaded或load事件在BF Cache恢复页面时不会触发，需要监听pageshow事件，判断页面是否从缓存恢复，再处理重复元素：

// 页面初始加载时执行添加逻辑
document.addEventListener('DOMContentLoaded', addTemplateFields);

// 处理BF Cache恢复的场景
window.addEventListener('pageshow', function(event) {
  // event.persisted为true表示页面从BF Cache中恢复
  if (event.persisted) {
    // 移除已存在的重复元素，再重新执行添加逻辑
    const existingBlock = document.getElementById('pattern_html_block_id_field');
    if (existingBlock) {
      existingBlock.remove();
    }
    addTemplateFields();
  }
});

3. 额外优化建议 #

• 尽量避免用innerHTML批量添加HTML（你试过逐个创建没解决是因为BF Cache的核心问题，但逐个创建更易于精准控制DOM），可以改用document.createElement逐个构建元素并添加：

  function addTemplateFields() {
    if (document.getElementById('pattern_html_block_id_field')) return;
  
    const fieldset = document.getElementsByTagName("fieldset")[0];
    // 构建第一个div容器
    const attachTemplateDiv = document.createElement('div');
    attachTemplateDiv.className = 'form-group control-group belongs_to_association_type pattern_field';
    attachTemplateDiv.id = 'pattern_html_block_id_field';
    
    // 后续依次构建label、select等子元素并append到容器中
    // ...
    
    fieldset.appendChild(attachTemplateDiv);
  }
  

• 如果你不需要BF Cache的优化，可以通过设置响应头Cache-Control: no-store禁用它，但不推荐——这会降低页面加载性能。

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