HTML object元素contentDocument为null但存在#document的问题咨询

首先说最常见的触发场景：同源策略限制。

如果你的SVG文件和HTML页面不在同一个源（比如HTML以file://协议本地打开，SVG放在不同层级的文件夹；或者HTML部署在A域名，SVG托管在B域名），浏览器会因为同源策略限制脚本访问contentDocument属性，所以它会返回null。但Chrome开发者工具拥有更高的权限不受这个限制，所以你能在Elements面板里看到对应的#document节点。

另一种可能是页面onload与object内容加载的时机差异：
页面的onload事件确实会等待所有资源加载完成，但部分浏览器中，object元素的contentDocument属性绑定动作，会比页面onload触发晚一小步——虽然SVG已经完成渲染（浏览器可能通过预渲染或缓存直接显示内容），但脚本层面的属性还没完成初始化。

解决办法 #

• 优先排查跨源问题：确保SVG和HTML同域（如果是本地调试，建议用本地服务器如http-server打开页面，避免file://协议下的跨源规则差异）。
• 不要依赖页面的onload，直接给object元素绑定自身的load事件，在这个事件回调里访问contentDocument：

  const svgObject = document.querySelector('object[data="archives.svg"]');
  svgObject.addEventListener('load', function() {
    const svgDoc = this.contentDocument;
    // 此处可正常操作SVG文档
  });
  

另外可以检查下object元素的data属性是否正确指向SVG，以及Network面板中SVG的加载状态码——不过你提到内容已渲染，这个问题的概率较低。

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