隐藏元素，但保持可点击状态？

Question

I have a button generated inside an iframe. Unfortunately, I can't change how it looks, as it's delivered by 3rd party library. I thought of a little trick to use my own button and keep the generated one inside:

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

This way, I can tell the library to place its buttons inside mine, so the <iframe> would get appended like this:

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

Now, the only thing left is to hide the <iframe> . I can't simply use visibility: hidden , because that way the click event no longer works. Why I did is instead:

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

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

It seems to be a good solution, as I don't see the 3rd party button and I can do whatever I want with my own button. I just need to make sure it's not larger that the button inside, which would render part of my own button unclickable.

What I would prefer, would be rendering that other element somewhere else and hiding it with display: none or position: absolute outside of my viewport and then triggering the click inside it. Due to modern CORS policies, as far as I know it's not possible to reach elements inside the <iframe> though - am I right?

Is there any more reliable way to achieve the same effect without so much trickery? I'm not that excited about opacity: .0001 , it make me anxious that in some browsers it will leave some visible trace of the other button.

Answer 1

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