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?

create object for someSVG.js so like this var some = new SomeSVG() and call some.foo() — Chandu D
– Chandu D, Commented Aug 24, 2017 at 9:47

ccprog · Accepted Answer · 2017-10-27 21:42:06Z

2

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.

edited Oct 27, 2017 at 21:42

answered Aug 24, 2017 at 12:06

ccprog

22.2k4 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Longson Over a year ago

The SVG must also be same origin or CORS accessible.

ccprog Over a year ago

@TheBlueCrayon wanted to comment, but couldn't because of missing reputation. He left an edit instead. Here's the full text: Safari doesn't support HTMLObjectElement.contentWindow for svg elements. Tested in Safari 11 and older for both Mac and iOS with this simplified test case. HTMLObjectElement.contentWindow isn't included in the apple developer documentation at all.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related