Question

我在iframe中生成了一个按钮。不幸的是，我无法更改它的外观，因为它是3rd party库提供的。我想到了一个小技巧，可以使用我自己的按钮并将生成的按钮保留在里面：

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

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

我希望将其他元素渲染到其他位置，并用display: none或position: absolute将其隐藏在我的视口之外，然后触发其中的单击。根据现代CORS政策，据我所知，虽然无法到达<iframe>内部的元素-是吗？

有没有更可靠的方法来达到相同的效果而又没有太多的诡计？我对opacity: .0001并不感到兴奋，这让我感到焦虑，因为它在某些浏览器中会留下其他按钮的可见痕迹。

Answer 1

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

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

1 个答案: