javascript - 隐藏元素，但保持可点击？

Question

我在 iframe 中生成了一个按钮。不幸的是，我无法更改它的外观，因为它是由第 3 方库提供的。我想到了一个小技巧来使用我自己的按钮并将生成的按钮保存在里面:

<button id="my-button">Click Me</button>

通过这种方式，我可以告诉图书馆将它的按钮放在我的里面，所以 <iframe>会像这样附加:

<button id="my-button">
    Click Me
    <iframe src="..."></iframe>
</button>

现在，唯一剩下的就是隐藏 <iframe> .我不能简单地使用 visibility: hidden , 因为这样 click事件不再有效。我这样做的原因是:

#my-button {
    overflow: hidden;
    position: relative;
}

#my-button > * {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: .0001;
}

这似乎是一个很好的解决方案，因为我没有看到第 3 方按钮，而且我可以使用自己的按钮做任何我想做的事。我只需要确保它不会比里面的按钮大，这会使我自己的按钮的一部分无法点击。

我更喜欢的是在其他地方渲染其他元素并用 display: none 隐藏它或 position: absolute在我的视口(viewport)之外，然后触发它里面的点击。由于现代 CORS 政策，据我所知，不可能访问 <iframe> 中的元素。不过 - 我说得对吗？

有没有更可靠的方法来达到同样的效果而不需要那么多花招？我对 opacity: .0001 没那么兴奋，这让我很焦虑，因为在某些浏览器中它会留下一些其他按钮的可见痕迹。

Answer 1

出于安全原因，不可能让父元素触发对 iFrame 中按钮(或任何其他元素)的点击。