如何在绝对位置 iframe 上添加按钮，同时仍然能够与之交互？

Question

我的标记完全按照这个顺序：

  <iframeContainer>
    <iframe>
  </iframeContainer>
  <container>
    <button1>
    <button2>
    <sidebar>
    ...
 </container>

container 应该位于 iframe 本身之上。不幸的是，由于我的container 具有 100% w/h 并且显然不允许点击 iframe 本身，因此我无法让它们玩得很好。示例：

const buttonThatIWannaClick = document.getElementById('buttonOverIframe');

buttonThatIWannaClick.addEventListener('click', function() {
  console.log('I am able to click the button!');
});

#videoContainer {
  position: absolute;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#buttonOverIframe {
  position: absolute;
  color: white;
  top: 50%;
  left: 50%;
}

#videoContainer iframe {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  position: absolute;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#openSidebar {
  display: flex;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 30px;
  color: white;
  transform: translate3d(0, 50%, 0);
}

<div id="videoContainer">

  <div id="buttonOverIframe">Button Inside Iframe</div>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="container">
  <div id="openSidebar">Open Sidebar</div>
</div>

您可以看到我无法与 iframe 交互。 **我知道这是因为container 具有 100% 的宽度/高度，即使肉眼看不到它，浏览器也会看到它在前面。

我怎样才能重新安排这样的事情：

1. 我可以与 iframe 上的按钮进行交互。
2. 我可以检测到 iframe 外部/上的点击吗？

Answer 1

在容器中使用pointer-events: none;，在活动元素上使用pointer-events: initial

const buttonThatIWannaClick = document.getElementById('buttonOverIframe');

buttonThatIWannaClick.addEventListener('click', function() {
  alert('I am able to click the button!');
});

#videoContainer {
  position: absolute;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#buttonOverIframe {
  position: absolute;
  color: white;
  top: 50%;
  left: 50%;
}

#videoContainer iframe {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  position: absolute;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

#openSidebar {
  display: flex;
pointer-events: initial;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 30px;
  color: white;
  transform: translate3d(0, 50%, 0);
}

<div id="videoContainer">

  <div id="buttonOverIframe">Button Over Iframe</div>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="container">
  <div id="openSidebar">Open Sidebar</div>
</div>