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

• 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

1 Answer 1

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.