CODEWITHSUNDEEP
javascriptjqueryhtmlsvgcors
12th
12th

Reputation: 301

Object tag loads SVG but its Content Document is null

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.net/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.com/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.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%"/>
       ...

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.

Upvotes: 6

Views: 3473

Answers (1)

12th
12th

Reputation: 301

The answer from @Kaiido in the comments 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.

Upvotes: 6

Related Questions