How to add JavaScript onClick handler to an embedded html object?

Question

I'm trying to add an onClick handler to an embedded object. The handler needs to execute a function which is in an external .js file which is linked to the current html file via <script src="....

Do I need to reference the function differently due to it being located elsewhere?

Here is the code as it currently stands (which does not work, but also does not produce any errors):

<embed src="svg/button.svg" id="buttonEmbed" width="95" height="53" 
type="image/svg+xml" onClick="buttonEvent('buttonClicked')"/>

Can't you just call the script inside the svg onclick of the main container? — mplungjan, Jul 01 '10 at 09:04
possible duplicate of [Making an svg image object clickable with onclick, avoiding absolute positioning](http://stackoverflow.com/questions/2296097/making-an-svg-image-object-clickable-with-onclick-avoiding-absolute-positioning) — jtbandes, Aug 10 '14 at 23:00

score 9 · Accepted Answer · edited May 23 '17 at 12:01

9

You have to implement onclick inside the svg and link it to the external JavaScript function using javascript inside the svg. ~~See the SVG wiki for examples.~~

Update: Apparently the SVG wiki is no more. No surprise that the best references I can now (quickly) find are on StackOverflow itself.

This answer describes how to implement onclick inside the svg.

edited May 23 '17 at 12:01

Community

1
1

answered Jul 01 '10 at 09:08

Mario Menger

5,862
2
28
31

Thanks. I have placed the onclick inside the svg shape itself, however it now can't find the function it's looking for. Presumably because it's in an external .js file? – Jack Roscoe Jul 01 '10 at 09:19
How are you calling the external function from your SVG? Have you prefixed it with `top.` or `parent.` ? – Mario Menger Jul 01 '10 at 09:22
I have simply added onclick="buttonEvent()" (after testing with an alert, which worked). What should I prefix and where? – Jack Roscoe Jul 01 '10 at 09:24
Try using onclick="top.buttonEvent()" or onclick="parent.buttonEvent()" - hope either of these work! – Mario Menger Jul 01 '10 at 09:30
1

My mistake. I've appended it with parent. and it's now working. Thanks so much! – Jack Roscoe Jul 01 '10 at 09:40

score 2 · Answer 2 · answered Jul 01 '10 at 09:18

2

Use either javascript binding (Mario Menger answered that already).

If you can't or won't use the binding, you can use what xil3 answered with one modification:

Use an empty anchor tag <a href="javascript:someFunc()"></a> as the click consumer. Set it's z-index and position/size so it positioned over the svg object (for cross-browser compatibility).

answered Jul 01 '10 at 09:18

Jaroslav Jandek

9,463
1
28
30

Thanks a lot! Your answer is what I need. Not always we have access to a svg file. – Akmal May 04 '18 at 03:16

score 1 · Answer 3 · answered Mar 31 '20 at 02:20

If you wanted to call a method from the embedded object you could do something like this, Have the following as your embedsrc.html:

    <img src="svg/button.svg" width="95" height="53" 
    onClick="window.parent.buttonEvent('buttonClicked')"/>

and then have this in your main html:

    <embed src="embedsrc.html" width="95" height="53"> </embed>

    <script type='text/javascript'>
    function buttonEvent(input){alert(input);}
    </script>

score 0 · Answer 4 · answered Jul 01 '10 at 09:20

0

Onclick should all be lowercase.

<embed src="svg/button.svg" id="buttonEmbed" width="95" height="53" 
type="image/svg+xml" onclick="alert('hello!');"/>

answered Jul 01 '10 at 09:20

Tom Gullen

61,249
84
283
456

How to add JavaScript onClick handler to an embedded html object?

4 Answers4

Linked