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

问题摘要：

我已经使用

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

小提琴示例：

---

代码：

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

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

Uncaught TypeError: Cannot read property 'documentElement' of null

---

除了CORS之外，还有什么东西阻止我访问对象的内部内容吗？如果您有任何关于如何进一步排除故障的想法，我们将不胜感激。

以上评论中@kaido的回答：

---

远程服务器可以通过http头执行的唯一操作是让 浏览器知道他们不允许在浏览器中显示其内容 框架但这并不意味着你可以通过 脚本，即使允许显示它。所以是的，内容被加载了， 您的开发工具将能够显示它（因为它们不受 CORS）但你的js不会

---

“从启用CORS的源”。这是什么意思？它来自另一个域？那你就卡住了。在替换文档中呈现时，无法从其他域访问文档。现在，根据服务器的配置，您可能可以通过AJAX获取svg内容，并将其作为blobURI加载到

标记中（在IE中不起作用），或者甚至可以将

目标

设置为about:blank

，然后手动附加您获取的文档（虽然现在是HTML文档），具有适当CORS设置以允许共享的其他域。需要明确的是，您的意思是，即使SVG由加载到页面上，我也无法正常使用Javascript访问它的内容？内部内容不应该是可访问的，因为我可以在页面中看到它的标记吗？我想如果这是一个CORS问题，我根本无法接收SVG。请注意，资产加载，但通过js访问会抛出一个错误。这是CORS的预期结果吗？如果出现CORS问题，我会认为整个资产不会加载。资产加载但您无法访问它将是CORS。远程服务器可以通过http头执行的唯一操作是让浏览器知道它们不允许在框架中显示其内容。但这并不意味着即使允许显示，您也可以通过脚本访问此内容。因此，是的，内容已经加载，您的开发工具将能够显示它（因为它们不受CORS限制），但您的js不会。

<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" width="100%" height="100%"/>
       ...

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

Uncaught TypeError: Cannot read property 'documentElement' of null