Safari下JavaScript能否捕获303重定向并处理embed/object标签加载异常？

核心结论 #

可以通过JavaScript手动处理303重定向来绕过Safari的这个缺陷——主动发起请求捕获跳转地址，再用最终URL重新生成embed/object标签，同时这套方案也适用于iOS上的Chrome（因共用WebKit引擎）。

实现思路 #

1. 遍历页面所有embed/object标签，针对其src发起fetch请求，通过redirect: 'manual'禁用浏览器自动跳转，从而捕获303响应
2. 从响应头的Location字段提取最终文件URL
3. 复制原标签的所有属性，创建新的embed/object标签替换旧标签（避免旧标签的异常渲染状态残留）

代码实现 #

// 处理单个嵌入标签的重定向问题
async function fixEmbedRedirect(element) {
  const originalSrc = element.src;
  if (!originalSrc) return;

  try {
    // 手动拦截重定向，不自动跳转
    const response = await fetch(originalSrc, { redirect: 'manual' });
    
    // 捕获303响应并获取跳转地址
    if (response.status === 303) {
      const redirectUrl = response.headers.get('Location');
      if (redirectUrl) {
        // 创建新标签并复制原属性
        const newElement = document.createElement(element.tagName.toLowerCase());
        Array.from(element.attributes).forEach(attr => {
          newElement.setAttribute(attr.name, attr.value);
        });
        // 更新为最终文件URL
        newElement.src = redirectUrl;
        
        // 替换旧标签，避免残留异常状态
        element.parentNode.replaceChild(newElement, element);
      }
    }
  } catch (error) {
    console.error(`处理${originalSrc}重定向失败:`, error);
  }
}

// 页面加载完成后批量处理所有嵌入标签
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('embed').forEach(fixEmbedRedirect);
  document.querySelectorAll('object').forEach(fixEmbedRedirect);
});

关键注意事项 #

• 跨域限制：确保原URL和跳转后的URL配置了CORS允许当前域名访问，否则fetch会因跨域报错
• PDF/Word特殊处理：针对测试中出现的浏览器无响应问题，必须替换旧标签而非仅修改src，避免旧渲染进程残留导致卡顿
• 性能优化：若页面存在大量嵌入标签，可分批处理或添加防抖逻辑，避免一次性发起过多请求
• 后端替代方案：如果能修改Moodle的文件分发逻辑，可直接在后端提前处理303重定向，返回最终文件URL给前端，从根源解决问题

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