如何确认HTML Object标签中嵌入的SVG已成功加载？

我完全懂你碰到的麻烦——用<object>嵌入SVG时，要么注册load事件太晚，SVG已经加载完导致事件没触发；要么直接去取contentDocument，结果SVG还没加载好拿不到元素。这里给你两个靠谱的解决思路：

方案1：主动检查 + 事件监听（首推） #

这个方法能同时覆盖「SVG已提前加载完成」和「SVG还在加载中」两种场景，逻辑很直白：先主动校验一次当前状态，要是已经加载好就直接处理；要是没加载好，再注册load事件等后续完成。

const svgObject = document.getElementById('object_id');

function handleSvgReady() {
  // 尝试获取SVG元素
  const svgElement = svgObject.contentDocument?.querySelector('svg');
  if (svgElement) {
    // 这里写SVG加载完成后的业务逻辑
    console.log('SVG加载完成！', svgElement);
    // 可选：事件触发后移除监听，避免重复执行
    svgObject.removeEventListener('load', handleSvgReady);
  }
}

// 先主动检查一次，应对SVG已经加载完的情况
handleSvgReady();

// 注册load事件，应对SVG还未加载的情况
svgObject.addEventListener('load', handleSvgReady);

为什么这招管用？如果脚本执行时SVG已经加载完毕，handleSvgReady第一次调用就能拿到SVG元素；如果还在加载中，load事件触发时会再次调用该函数，绝对不会错过加载完成的时机。

方案2：轮询检查（备用） #

要是碰到load事件异常不触发的特殊场景，可以用轮询的方式定期检查SVG状态。这种方式虽然不如事件监听优雅，但兼容性拉满。

const svgObject = document.getElementById('object_id');
// 设置轮询间隔，比如每100ms检查一次，可按需调整
const checkTimer = setInterval(() => {
  const svgElement = svgObject.contentDocument?.querySelector('svg');
  if (svgElement) {
    // 加载完成后停止轮询
    clearInterval(checkTimer);
    // 执行加载完成后的逻辑
    console.log('SVG加载完成！', svgElement);
  }
}, 100);

关键注意事项 #

• 同源策略限制：如果SVG文件和当前页面不在同一个域名下，浏览器会因为同源策略阻止你访问contentDocument。这种情况要么把SVG放到同域，要么在服务器端配置CORS允许跨域访问。
• 务必做空值检查：SVG加载完成前，contentDocument可能是null，用?.可选链操作符能避免控制台报错。

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