Calling globally defined JavaScript function from external SVG

Question

I have an HTML page with external JavaScript module

<script type="text/javascript" src="js/js.js"></script>

and an external SVG map "img/map.svg".

I need to make clickable objects on the map which will in turn call some global JavaScript function myJSFunction defined in "js/js.js". This function will modify the title and contents of the HTML page, hide the SVG map and display a table with some data instead. How can I do this? A naive attempt to set an onclick event in the svg code like the following:

<g
     id="g170"
     onclick="myJSFunction()">

results in error:

Uncaught ReferenceError: myJSFunction is not defined at SVGGElement.onclick

If you're seeing that error then the function is simply not globally defined. Is it in a document.ready handler, for example? It would help to see a working example of the issue, with all relevant code — Rory McCrossan
– Rory McCrossan, Commented Dec 10, 2019 at 9:48
@RoryMcCrossan I just defined it as function myJSFunction() { alert("clicked!"); }. And the script loading code is placed after <object data="img/map.svg" .... — Alexey Popkov
– Alexey Popkov, Commented Dec 10, 2019 at 9:52
@RoryMcCrossan When I run myJSFunction() from the console in Chrome, it works! — Alexey Popkov
– Alexey Popkov, Commented Dec 10, 2019 at 9:56
@RobertLongson Thank you, window.parent.myJSFunction(); works! — Alexey Popkov
– Alexey Popkov, Commented Dec 10, 2019 at 10:08

Robert Longson · Accepted Answer · 2019-12-10 10:11:33Z

2

You can access parent javascript functions via window.parent i.e. window.parent.myJSFunction()

answered Dec 10, 2019 at 10:11

Robert Longson

125k27 gold badges272 silver badges258 bronze badges

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

1 Comment

Alexey Popkov Over a year ago

I faced a security error with this solution: stackoverflow.com/q/59279385/590388

Collectives™ on Stack Overflow

Calling globally defined JavaScript function from external SVG

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related