Safari 14/15版本partial page hydration失效问题求助

核心故障原因分析 #

• XMLHttpRequest JSON解析兼容性问题：Safari 14/15 对XMLHttpRequest.responseType = 'json'的支持存在bug，直接读取xhr.response可能返回null或无法解析的原始文本，导致没有内容可注入。
• DOM更新时序冲突：旧版Safari的重绘机制会优先处理元素移除操作，若新内容注入延迟，会造成内容区域永久空白。
• 链接拦截不彻底：Safari 14/15中event.preventDefault()在事件冒泡阶段执行可能失效，触发默认页面跳转，中断水化逻辑，仅保留未被替换的页眉页脚。

针对性修复方案 #

1. 兼容JSON响应处理 #

放弃依赖responseType='json'，手动解析响应文本并添加错误捕获，失败时回退到完整页面：

const xhr = new XMLHttpRequest();
xhr.open('GET', targetJsonUrl);
// 不设置responseType，改用responseText解析
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    let contentData;
    try {
      contentData = JSON.parse(xhr.responseText);
      document.getElementById('main-content').innerHTML = contentData.content;
    } catch (parseError) {
      // 解析失败直接跳转原始页面
      window.location.href = originalLinkHref;
    }
  } else {
    window.location.href = originalLinkHref;
  }
};
xhr.onerror = xhr.ontimeout = () => window.location.href = originalLinkHref;
xhr.send();

2. 优化DOM更新逻辑 #

将内容移除与插入放在同一事件循环，避免浏览器重绘中断：

const contentContainer = document.getElementById('main-content');
// 先临时隐藏容器，避免视觉闪烁
contentContainer.style.visibility = 'hidden';
// 同步插入新内容后恢复显示
contentContainer.innerHTML = contentData.content;
contentContainer.style.visibility = 'visible';

3. 强化链接拦截可靠性 #

使用事件捕获阶段触发拦截，确保优先阻止默认行为：

document.addEventListener('click', function(event) {
  const targetLink = event.target.closest('a');
  if (targetLink && targetLink.host === window.location.host) {
    // 第一时间阻止默认行为与事件冒泡
    event.preventDefault();
    event.stopPropagation();
    const jsonUrl = targetLink.href.replace(/\.html$/, '.json');
    // 调用水化逻辑
    hydratePage(jsonUrl, targetLink.href);
  }
}, true); // 第三个参数设为true，启用捕获阶段

4. 验证服务器响应头 #

确保JSON文件的Content-Type响应头为application/json，旧版Safari对text/plain类型的JSON解析兼容性较差。

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