如何检测动态变更src的<embed>元素加载完成？

实现思路 #

1. 先通过请求验证PDF资源的可访问性（确保返回200状态码）
2. 显示加载动画，默认隐藏<embed>元素
3. 资源验证通过后，设置<embed>的资源地址，监听其加载完成事件，完成后切换显示状态
4. 处理请求失败或加载出错的异常场景

完整代码实现 #

HTML 结构 #

<div id="embed-container">
  <!-- 加载动画容器 -->
  <div id="loading-spinner" class="loading-spinner">加载中...</div>
  <embed id="pdf-embed" style="display: none;">
</div>
<button id="load-btn">Load Embed Content</button>

CSS 加载动画样式 #

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 20px auto;
  text-align: center;
  line-height: 60px;
  font-size: 14px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

JavaScript 逻辑 #

const loadBtn = document.getElementById('load-btn');
const loadingSpinner = document.getElementById('loading-spinner');
const pdfEmbed = document.getElementById('pdf-embed');
const pdfUrl = 'https://example.com/';

loadBtn.addEventListener('click', async (event) => {
  // 禁用按钮防止重复点击
  loadBtn.disabled = true;
  // 显示加载动画，隐藏embed
  loadingSpinner.style.display = 'block';
  loadingSpinner.textContent = '加载中...';
  pdfEmbed.style.display = 'none';

  try {
    // 用HEAD请求验证资源状态，避免提前下载大文件
    const response = await fetch(pdfUrl, { method: 'HEAD' });
    if (response.status !== 200) {
      throw new Error(`资源不可访问，状态码：${response.status}`);
    }

    // 资源有效，设置embed的资源地址
    pdfEmbed.src = pdfUrl;

    // 监听embed加载完成事件
    pdfEmbed.onload = () => {
      loadingSpinner.style.display = 'none';
      pdfEmbed.style.display = 'block';
      loadBtn.disabled = false;
    };

    // 监听加载失败事件
    pdfEmbed.onerror = () => {
      throw new Error('PDF内容加载失败');
    };
  } catch (error) {
    // 错误提示
    loadingSpinner.textContent = error.message;
    loadBtn.disabled = false;
  }
});

关键细节说明 #

• 使用HEAD请求预验证资源，只获取响应头信息，节省带宽
• 禁用按钮避免用户重复触发请求
• 同时监听embed的load和onerror事件，覆盖成功与失败场景
• 加载动画采用纯CSS实现，无需依赖外部资源

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