Edge中通过<object>嵌入的SVG onload事件监听器未触发求助

我之前也碰到过Edge这个兼容性坑，它对<object>元素的加载事件处理确实和其他浏览器有差异。下面是几个经过验证的解决思路，你可以逐个尝试：

• 同时监听readystatechange事件作为兜底
  Edge有时候不会稳定触发load事件，但会在<object>的readyState变为complete时触发readystatechange事件。你可以同时绑定这两个事件，确保覆盖所有场景：

  const svgObj = document.getElementById('your-svg-object-id');
  
  function handleSVGLoaded() {
    const svgDoc = svgObj.contentDocument;
    if (!svgDoc) return;
    // 这里执行你的文本修改逻辑，比如：
    const targetText = svgDoc.getElementById('custom-text-element');
    if (targetText) {
      targetText.textContent = '你的定制化内容';
    }
  }
  
  svgObj.addEventListener('load', handleSVGLoaded);
  svgObj.addEventListener('readystatechange', () => {
    if (svgObj.readyState === 'complete') {
      handleSVGLoaded();
    }
  });
  

• 轮询检查SVG文档加载状态
  如果上面的方法还是不生效，用定时器轮询<object>的contentDocument是否可用是更稳妥的兜底方案：

  const svgObj = document.getElementById('your-svg-object-id');
  const checkInterval = setInterval(() => {
    const svgDoc = svgObj.contentDocument;
    if (svgDoc && svgDoc.readyState === 'complete') {
      clearInterval(checkInterval);
      // 执行文本修改逻辑
      const targetText = svgDoc.getElementById('custom-text-element');
      if (targetText) {
        targetText.textContent = '你的定制化内容';
      }
    }
  }, 50); // 每50ms检查一次，可根据需求调整间隔
  

• 排查跨域或资源加载异常
  确认你的SVG资源和当前页面是同域的，或者服务器已经配置了正确的CORS响应头。如果是跨域SVG，Edge会限制访问contentDocument，导致无法修改内部元素。这种情况下要么调整资源域名，要么在服务器端添加Access-Control-Allow-Origin响应头。

• 确保脚本在DOM就绪后执行
  如果你的脚本是在页面头部直接加载的，可能会出现<object>元素还未被解析就绑定事件的情况。建议把脚本放在DOMContentLoaded事件中执行，确保元素已经存在：

  document.addEventListener('DOMContentLoaded', () => {
    // 在这里绑定事件或执行轮询逻辑
    const svgObj = document.getElementById('your-svg-object-id');
    // ... 后续处理代码
  });
  

调试时你可以在Edge控制台直接打印svgObj.contentDocument，看看是否能正常获取到SVG文档。如果返回null，大概率是跨域或者资源未加载完成的问题。

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