Bubbling events from HTML elements down into iframe_问答_开发者

Bubbling events from HTML elements down into iframe

开发者 https://www.devze.com 2023-02-18 01:20 出处：网络

I have an iframe that acts as a big button. The entire content inside of the iframe is one click target.

相关专题：css javascript

I have an iframe that acts as a big button. The entire content inside of the iframe is one click target.

What I'd like to do is hover some piece of HTML over the iframe kind of like in this example.

<html>
    <head>
        <style>
            iframe {
                height: 100px;
                width: 300px;
            }
            div {
            position: relative;
            }
            a {
                 position: absolute;
                 top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <iframe src="frame.html"></iframe>
            <a id="text">Image</a>
   开发者_运维知识库     </div>
    </body>
</html>

You can also see a live example here http://dev.gjcourt.com/iframe

The problem is that I'd like to have click events from the anchor bubble down into the iframe. Is there any way to make this possible?

Position the iframe absolutely, make the background of the iframe transparent and give it a z-index higher than the text/other content.

Why are you using an iframe for this?

This is an example of possible Clickjacking and most browsers attempt to prevent it.

As @Zikes mentioned this is a clickjacking attack, but it is still possible nowadays. All you need to do is to overlay your iframe with SVG element and set pointer-events="none", so it will flow all cursor events through SVG element down to iframe. You can find more examples and crossbrowser solutions in this article.