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

Question

问题摘要：

我已经使用标签成功地将 SVG 加载到我的页面上<object>，但我仍然无法使用 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" width="100%" height="100%"/>
       ...

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

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

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

Uncaught TypeError: Cannot read property 'documentElement' of null

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

Answer 1

上面评论中@Kaiido的回答：

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