admin管理员组

文章数量:1418104

Issue Summary:

I have successfully loaded an SVG onto my page using the <object> tag but I am still unable to access it's inner elements with javascript. It doesn't seem to be a CORS issue since the SVG is successfully loaded on the page, however if I load the same asset from my own domain and then run the same javascript I do not get the error detailed below.

Example Fiddle: /

Code:

I have the following code to load an SVG via an object tag: (from a CORS enabled source)

<object type="image/svg+xml" data=".svg"></object>

This successfully loads the SVG onto the webpage. I can see the SVG code embedded into the page as well:

<object type="image/svg+xml" data=".svg"></object>
  #document
    <svg xmlns="">
      <rect xmlns="" x="0" y="0" width="100%" height="100%"/>
       ...

I want to be able access the SVGs DOM via Javascript. I start with the following code:

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

This throws the following error in the browser when run:

Uncaught TypeError: Cannot read property 'documentElement' of null

Is there something beyond CORS which is preventing me from accessing the objects inner content? Any ideas on how to troubleshoot this further would be greatly appreciated.

Issue Summary:

I have successfully loaded an SVG onto my page using the <object> tag but I am still unable to access it's inner elements with javascript. It doesn't seem to be a CORS issue since the SVG is successfully loaded on the page, however if I load the same asset from my own domain and then run the same javascript I do not get the error detailed below.

Example Fiddle: http://jsfiddle/3ga8bhj6/

Code:

I have the following code to load an SVG via an object tag: (from a CORS enabled source)

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

This successfully loads the SVG onto the webpage. I can see the SVG code embedded into the page as well:

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

I want to be able access the SVGs DOM via Javascript. I start with the following code:

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

This throws the following error in the browser when run:

Uncaught TypeError: Cannot read property 'documentElement' of null

Is there something beyond CORS which is preventing me from accessing the objects inner content? Any ideas on how to troubleshoot this further would be greatly appreciated.

  • javascript
  • jquery
  • html
  • svg
  • cors
Share Improve this question edited Jun 21, 2018 at 17:46 12th asked Jun 21, 2018 at 0:49 12th12th 3014 silver badges14 bronze badges 8
  • 2 "From a CORS enabled source". What does that mean? It is from an other domain? Then you're stuck. There is no way to access a document from an other domain when rendered in a replaced document. Now, depending on the server's config, you might be able to fetch the svg content via AJAX and load this as a blobURI in your <object> tag (won't work in IE) or even make your <object> target about:blank and then append your fetched doc manually (would now be an HTML document though). – Kaiido Commented Jun 21, 2018 at 1:19
  • By "From a CORS enabled source" I mean, an other domain with appropriate CORS settings to allow sharing. Just to be clear, you're saying that even though the SVG is loaded on the page by the <object>, I will not be able to access it's content with Javascript normally? Shouldn't the inner content be accessible because I can actually see it's markup in the page? I figured if it was a CORS issue, I wouldn't be able receive the SVG at all. – 12th Commented Jun 21, 2018 at 16:29
  • Added a jsfiddle. Note that the asset loads but accessing via js throws an error. Is this an expected result of CORS? I would have thought the entire asset would not load if CORS was the issue. – 12th Commented Jun 21, 2018 at 17:50
  • The asset loads but you can't access it would be CORS. – Robert Longson Commented Jun 21, 2018 at 18:08
  • 3 The only thing a remote server can do via http headers is to let the browser know that they are not allowed to display its content in a frame. But that doesn't mean you'll be able to access this content via scripts even if allowed to display it. So yes, the content is loaded, your dev tools will be able to show it (because they are not tied by CORS) but your js won't. – Kaiido Commented Jun 21, 2018 at 22:36
 |  Show 3 more ments

1 Answer 1

Reset to default 6

The answer from @Kaiido in the ments above:

The only thing a remote server can do via http headers is to let the browser know that they are not allowed to display its content in a frame. But that doesn't mean you'll be able to access this content via scripts even if allowed to display it. So yes, the content is loaded, your dev tools will be able to show it (because they are not tied by CORS) but your js won't.

本文标签： javascriptObject tag loads SVG but its Content Document is nullStack Overflow

版权声明：本文标题：javascript - Object tag loads SVG but its Content Document is null - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745182891a2646548.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。