css - 点击粘性、透明的 iframe

Question

我有一个网页，其中底部被一个 iframe 占据，我将它设置为透明以查看重叠的元素。

虽然透明度很好，但重叠的链接不可点击，除非我在 iFrame 中将指针事件切换为无(这显然通过另一个解决了问题)。我尝试在 iFrame 中制作一个 div，覆盖“无菜单”部分，并将指针事件设置为全部，但它似乎不起作用。我还必须记住聊天组件是粘性的。

Answer 1

这个问题很老了，但对于任何偶然发现它的人来说......

1. iFrames表示包裹在父 DOM 中的另一个完整 DOM。 CSS之类的东西 pointer-events通常不会在 iFrame 上工作或跨浏览器以相同的方式运行。

2. 您可以尝试使用 iframe > * {pointer-events: none;} 影响 iframe 内的所有内容但如果 iframe 内容跨域，它可能无法正常工作。

3. pointer-events: all;旨在与 SVGs only 一起使用不是其他 DOM 元素。

OP 的正确解决方案是要么将 iFrame 缩放到仅内容的大小，要么根本不使用 iFrame。

嵌入内容的其他选项:

1. HTML <embed> - Docs

2. HTML <object> - Docs

3. Web Components HTML Imports - 最近已弃用，但有一个 polyfill

这些都不是很好的解决方案，但它们可能会起作用，具体取决于问题。

最后，您可以使用 Javascript 调用用外部内容填充元素的内容。这本质上就是使用 React/Angular/Vue 构建的“单页”应用程序在幕后所做的事情. 注意:走这条路一定要注意CORS headers如果内容来自不同的域。