Sending data to a script in a container page from a script running in an embedded page

Question

Hi Guys,

I have run into an interesting problem and am not sure if it can be resolved.

I have a JS script (say script1) running in an SVG document with lots of rectangles which has collected user-entered information like which rectangle was clicked / data corresponding to the rectangle etc.

This SVG document is embedded inside an HTML page with <object> tags.

The problem is that script1 needs to pass the collected information to another JS script (say script2) running inside the container HTML page.

Does anybody know how to do that?

Further, to enhance my understanding, what if I had used <embed> or <iframe> tags; what method would have been appropriate then?

Answer 1

As long as the referenced svg's are on the same domain as the referencing embed/iframe/object tags then you can use window.frameElement to find the element that embedded the svg from inside the svg. You can use object_or_iframe_or_embed.contentDocument to get the referenced svg document from the HTML side. There's also the legacy method .getSVGDocument() that can be used instead of .contentDocument.

Examples and more info from wiki.svg.org, or from the SVG Primer published by the SVG Interest Group.