Question

问题摘要：

我已经使用<object>标签成功地将SVG加载到了我的页面上，但是我仍然无法使用javascript访问它的内部元素。由于SVG已成功加载到页面上，因此这似乎不是CORS问题，但是但是如果我从自己的域中加载相同的资产，然后运行相同的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不会。

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

1 个答案: