对象标记加载 SVG 但其内容文档为空

Posted 2023-03-04

【中文标题】对象标记加载 SVG 但其内容文档为空

【英文标题】：Object tag loads SVG but its Content Document is null

【发布时间】：2018-11-30 05:12:42

【问题描述】：

问题摘要：

我已经使用<object> 标签成功地将SVG 加载到我的页面上，但我仍然无法使用javascript 访问它的内部元素。这似乎不是 CORS 问题，因为 SVG 已成功加载到页面上，但是如果我从自己的域加载相同的资产然后运行相同的 javascript，我不会收到错误详情如下。

小提琴示例： http://jsfiddle.net/3ga8bhj6/

---

代码：

我有以下代码通过对象标签加载 SVG：（来自启用 CORS 的源）

<object type="image/svg+xml" data="https://example.com/logo.svg"></object>

这成功地将 SVG 加载到网页上。我也可以看到嵌入到页面中的 SVG 代码：

<object type="image/svg+xml" data="https://example.com/logo.svg"></object>
  #document
    <svg xmlns="http://www.w3.org/2000/svg">
      <rect xmlns="http://www.w3.org/2000/svg" x="0" y="0"  />
       ...

我希望能够通过 Javascript 访问 SVG DOM。我从以下代码开始：

var svgDom = $("object")[0].contentDocument.documentElement;

这会在运行时在浏览器中引发以下错误：

Uncaught TypeError: Cannot read property 'documentElement' of null

除了 CORS 之外，还有什么东西阻止我访问对象的内部内容吗？任何有关如何进一步解决此问题的想法将不胜感激。

【问题讨论】：

“来自启用了 CORS 的源”。那是什么意思？它来自其他域？然后你就卡住了。在替换文档中呈现时，无法从其他域访问文档。现在，根据服务器的配置，您可能能够通过 AJAX 获取 svg 内容并将其作为 blobURI 加载到您的 <object> 标签中（在 IE 中不起作用），甚至可以让您的 <object> 目标 about:blank然后手动附加您获取的文档（虽然现在将是一个 html 文档）。

“来自启用了 CORS 的源”我的意思是，具有适当 CORS 设置以允许共享的其他域。为了清楚起见，您是说即使

添加了一个 jsfiddle。请注意，资产加载但通过 js 访问会引发错误。这是 CORS 的预期结果吗？如果 CORS 是问题，我会认为整个资产都不会加载。

资产加载但您无法访问它将是 CORS。

远程服务器唯一可以通过 http 标头做的事情就是让浏览器知道它们不允许在框架中显示其内容。但这并不意味着即使允许显示这些内容，您也可以通过脚本访问这些内容。所以是的，内容已加载，您的开发工具将能够显示它（因为它们没有被 CORS 绑定）但您的 js 不会。

【参考方案1】：

以上 cmets 中@Kaiido 的回答：

远程服务器可以通过 http 标头做的唯一事情就是让 浏览器知道他们不允许在 框架。但这并不意味着您可以通过以下方式访问此内容 即使允许显示脚本。所以是的，内容已加载， 您的开发工具将能够显示它（因为它们不受 CORS) 但你的 js 不会。