Question

我有一个iframe作为一个大按钮。 iframe内的整个内容都是一次点击目标。

我想做的是将一些HTML悬停在iframe类似于此示例中。

<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>

您还可以在此处查看实时示例http://dev.gjcourt.com/iframe

问题在于我希望将锚点气泡中的点击事件下移到iframe中。有没有办法让这成为可能？

Answer 1

绝对定位iframe，使iframe的背景透明，并为其指定高于文本/其他内容的z-index。

为什么要为此使用iframe？

Answer 2

这是可能Clickjacking的示例，大多数浏览器都试图阻止它。

Answer 3

正如@Zikes所说，这是一次点击劫持攻击，但现在仍有可能。您需要做的就是使用SVG元素覆盖iframe并设置pointer-events =“none”，这样它就会将所有光标事件通过SVG元素向下传递到iframe。您可以找到更多示例和crossbrowser solutions in this article。

将HTML元素中的事件冒泡到iframe

3 个答案: