1

I'm generating a iframe and filling it with a div and a d3 script to render the svg content inside it. Something like:

<iframe id="content-frame""> <head></head> <body> <div id="target"></div> <script> ... d3 code here ... </script> </body> </iframe>

Inside the D3 script I have the usual select: d3.select("#target").append("svg")... but it doesn't add the svg inside the div.

If I run d3.select("#content-frame").append("svg") instead it places the svg correctly inside the iframe though.

I've tried d3.select("#content-frame #target").append("svg") and similar selectors without success.

Any idea?

Thanks!.

rubenafo
  • 509
  • 1
  • 7
  • 23
  • Try console logging a variable set to d3.select("#content-frame") – Union find Feb 04 '15 at 04:06
  • 1
    The DOM in the main document and in the `iframe` are different, and CSS selectors do not traverse DOM boundaries. Therefore you can't select the element you want directly. See [this question](http://stackoverflow.com/questions/1088544/javascript-get-element-from-within-an-iframe) for more information. – Lars Kotthoff Feb 04 '15 at 09:54

1 Answers1

3

In order to edit the iframe body you need to use the content window property. The content Window property returns the Window object generated by an iframe element (through the window object, you can access the document object and then any one of the document's elements).

var iframeElementx = document.getElementById("MyiframeID"),
    iframeElementy = (iframeElementx.contentWindow || iframeElementx.contentDocument),
    iframeElementz = iframeElementy.document.body;
      
var svg = d3.select(iframeElementz)
user5684606
  • 35
  • 6