Safari刷新后Caspio页面动态插入标题、描述元素不显示的问题

• 基于Caspio无代码平台搭建的临时页面，在Mac/iPhone/iPad端的Safari普通模式下，首次加载渲染完全正常，手动刷新后标题、描述类元素丢失，图片元素始终显示正常
• 异常边界清晰：Safari隐私模式下访问全程无异常、Chrome全端访问无异常

现有实现逻辑说明 #

• 页面由Caspio平台渲染的两个独立区块构成，受无代码能力限制，无法直接调整区块内容排布，因此通过自定义JS完成DOM操作：从第二个区块提取指定元素，插入第一个区块的指定节点后隐藏原第二个区块
• 受平台能力限制，当前DOM结构较为零散，无法为元素配置稳定的唯一标识，团队已规划在后续正式前后端架构重构时统一清理优化DOM结构，当前核心目标是临时保障页面稳定运行

根因定位 #

• 异常触发和Safari普通模式的前进后退缓存（bfcache）机制直接相关
  • 隐私模式下Safari默认禁用bfcache，每次访问都是完全初始化的全新页面流程，因此所有元素都能被正常抓取
  • 普通模式下手动刷新时，Safari会优先从bfcache读取之前的DOM快照，此时Caspio自带的页面初始化赋值流程，还没有把文本值回填到cbParamVirtual1、cbParamVirtual2对应的虚拟输入框上；原代码只监听window.load事件，触发时这两个元素的.value属性为空，最终生成的标题、描述节点没有有效文本，表现为元素消失
  • 图片不受影响的原因是img标签是DOM原生节点，只要存在合法src就会正常渲染，不依赖Caspio的输入框赋值流程

临时适配方案 #

调整原有JS的执行时机，覆盖bfcache恢复的场景，增加元素初始化状态判断，避免在元素未赋值时提前抓取，修改后的代码如下：

const dataPageId = "46629000bb2da6866c8b4cc09dc1";
let isRendered = false;

function initPromoBlock() {
  // 防止重复执行DOM操作造成节点冗余
  if (isRendered) return;

  // 检查目标虚拟输入框是否完成初始化、拿到有效值
  const promoTitleVirtual = document.querySelectorAll("[id*='cbParamVirtual1']");
  const promoDescriptionVirtual = document.querySelectorAll("[id*='cbParamVirtual2']");
  if (!promoTitleVirtual[0]?.value || !promoDescriptionVirtual[0]?.value) {
    // 目标元素未初始化完成，间隔100ms重新检查状态
    setTimeout(initPromoBlock, 100);
    return;
  }
  isRendered = true;

  // 以下完全保留原有业务逻辑
  var theImage = document.createElement("img");
  theImage.setAttribute("src", "images/noImageFound.png");
  theImage.setAttribute("alt", "No Image");

  var promoTitleParagraph = document.createElement("h3");
  var promoTitle = document.createTextNode(promoTitleVirtual[0].value);
  promoTitleParagraph.appendChild(promoTitle);
  promoTitleVirtual[0].style.display = "none";

  var promoDescriptionParagraph = document.createElement("span");
  promoDescriptionParagraph.classList.add("w-screen")
  var promoDescription = document.createTextNode(promoDescriptionVirtual[0].value);
  promoDescriptionParagraph.appendChild(promoDescription);
  promoDescriptionVirtual[0].style.display = "none";

  var images = document.getElementsByTagName("img");
  for (i = 0; i < images.length; i++) {
    if (images[i].src.includes(dataPageId)) {
      theImage = images[i];
    }
  }
  var promotionImage = document.getElementById("promotionImage");
  var promoAnswers = document.querySelectorAll("[class*='cbFormBlock24']");

  promotionImage.appendChild(promoTitleParagraph);
  promotionImage.appendChild(theImage);
  promotionImage.appendChild(promoDescriptionParagraph);
  theImage.parentNode.lastChild.style.width = theImage.width + "px";
  promotionImage.appendChild(promoAnswers[0]);
}

// 同时覆盖常规加载、bfcache缓存恢复两种场景
window.addEventListener("load", initPromoBlock);
window.addEventListener("pageshow", function(e) {
  // 从bfcache恢复页面时，重置渲染状态、重新执行初始化
  if (e.persisted) {
    isRendered = false;
    initPromoBlock();
  }
});

方案说明 #

• 该修改不改动原有业务逻辑，仅补充时机判断和防重逻辑，完全适配Safari缓存机制，不需要调整Caspio平台的现有配置
• 方案无额外第三方依赖，代码体量小，后续正式系统重构时可直接整体替换为标准化前端逻辑，无迁移成本

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