Call SVG's external JavaScript function from the main html script?

Question

This is a similar question but I would like to know how to access the SVG's JavaScript functions when they are not embedded but are imported from an external file:

Call svg javascript function inside html javascript function

So, I'll attempt to make my question clear and hopefully not too convoluted.

I have main.html and main.js.

I also have someSVG.svg which imports someSVG.js which has a function, foo().

main.html imports someSVG.svg as an object element.

How do I call foo() from main.js?

Answer 1

Provided you embed the SVG with an <object> tag, you can access the window object of the SVG with

var inner = document.querySelector('object').contentWindow

Just like the window object of the outer window, it provides all global variables that you would find in normal window, for example a script-defined inner.foo() or inner.document .

NOTE: Safari supports HTMLObjectElement.contentDocument from version 10, but not .documentWindow.