CODEWITHSUNDEEP
javascripthtml
gordyr
gordyr

Reputation: 6276

Embedded iframe prevents click event on parent div. Any workaround?

I have a click event bound to a div element, inside this div I am embedding an SVG file using an iframe (I have tried with object/embed elements an the result is the same) like so:

<div id="example">
 <iframe src="example.svg" type="image/svg+xml" width="100%" height="100%"></iframe>
</div>

When I add the iframe element, it's parents click event no longer fires.

If I embed the SVG in an IMG element all is fine but the svg scaling no longer works correctly.

Is there an elegant workaround for this?

Thanks in advance.

Upvotes: 0

Views: 1404

Answers (1)

user757095
user757095

Reputation:

you can try to mask the iframe

<html>
  <head>
    <style type="text/css">
      #wrapper {
        width:1000px;
        height:600px;
        position:relative;
      }
      #wrapper:after {
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        z-index:2;
      }
    </style>
  </head>
  <body>
    <div id="wrapper" onclick="alert('hi mondo');">
      <iframe src="harvest.svg" type="image/svg+xml" frameborder="0"
              style="width:100%;height:100%;"></iframe>
    </div>
  </body>
</html>

the problem with this solution is that the context menu isn't relative to the image anymore.

Upvotes: 1

Related Questions