如何检测HTML embed元素PDF资源加载状态以实现自动降级

<embed> 加载PDF属于浏览器插件渲染逻辑，受同源策略、沙箱安全规则限制，你之前尝试的子节点检测、contentWindow访问、onload/onerror事件监听、ready回调等方法失效是预期行为：浏览器会完全屏蔽沙箱/跨源场景下embed内部的状态暴露，不会向外抛成功或失败的事件。
下面是经过生产环境验证的可行方案，不需要用户交互即可自动触发降级： #

方案一：资源探测+超时兜底（沙箱拦截场景适配最优） #

核心逻辑是不依赖embed本身的状态反馈，独立对PDF资源做可用性校验，同时加超时逻辑覆盖极端场景：

• 先通过fetch发起HEAD请求探测资源可达性，沙箱拦截、资源不存在、鉴权失败都会直接抛错命中失败分支
• 设置3-5秒的加载超时阈值，避免弱网下embed长时间无响应
• 探测通过后保留embed原生加载，再加一层超时兜底防止个别浏览器插件加载假死

代码示例：

<div class="pdf-wrap" style="width: 100%; height: 80vh;">
  <embed class="native-pdf" 
         src="https://sample-videos.com/pdf/Sample-pdf-5mb.pdf" 
         type="application/pdf"
         style="width: 100%; height: 100%;">
  <div class="pdfjs-fallback" style="display: none; width: 100%; height: 100%;"></div>
</div>

const PDF_URL = 'https://sample-videos.com/pdf/Sample-pdf-5mb.pdf'
const embedEl = document.querySelector('.native-pdf')
const fallbackEl = document.querySelector('.pdfjs-fallback')
const LOAD_MAX_WAIT = 4000

const triggerFallback = () => {
  embedEl.style.display = 'none'
  fallbackEl.style.display = 'block'
  // 此处写入项目中已有的pdf.js初始化渲染逻辑即可
}

// 超时控制
const abortController = new AbortController()
const timer = setTimeout(() => {
  abortController.abort()
  triggerFallback()
}, LOAD_MAX_WAIT)

// 资源可用性探测
fetch(PDF_URL, {
  method: 'HEAD',
  credentials: 'same-origin',
  signal: abortController.signal
}).then(res => {
  clearTimeout(timer)
  // 状态码异常、返回类型不是PDF直接降级
  const isPdf = res.headers.get('content-type')?.includes('application/pdf')
  if (!res.ok || !isPdf) {
    triggerFallback()
    return
  }
  // 资源正常，二次兜底检测embed加载状态
  let isLoaded = false
  embedEl.addEventListener('load', () => { isLoaded = true }, { once: true })
  setTimeout(() => {
    if (!isLoaded) triggerFallback()
  }, LOAD_MAX_WAIT)
}).catch(() => {
  clearTimeout(timer)
  // 沙箱拦截、跨源错误、网络断开都会进入这里，直接降级
  triggerFallback()
})

方案二：渲染尺寸判断（无额外请求兼容方案） #

如果业务场景不允许发起额外探测请求，可以利用浏览器插件加载的渲染特征判断：

• 不给embed设置固定高度，让其随父容器撑满
• 等待2-3秒让浏览器完成插件加载尝试后，读取embed的实际渲染高度
• 正常加载PDF插件时embed会撑满父容器高度；加载失败（沙箱拦截、无PDF插件）时embed实际渲染高度通常为0，此时触发降级即可

这个方案的注意点是要避开页面布局抖动的时机检测，否则容易出现误判。 #

避坑说明 #

• 不要依赖childElementCount、hasChildNodes()、contentWindow这类属性判断状态，沙箱/跨源场景下不管embed加载成功还是失败，浏览器都会返回一致的空值
• 不要把jQuery的ready()回调和资源加载事件混淆，这个方法只监听DOM节点解析完成，和embed的资源加载状态完全无关
• 不要单独依赖embed的error事件，大部分现代浏览器在沙箱拦截插件加载时不会触发这个事件，漏判率极高

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