React：是不是可以将事件传递给底层 iframe？

Posted 2023-02-25

【中文标题】React：是不是可以将事件传递给底层 iframe？

【英文标题】：React: Is it possible to pass an event to an underlying iframe?React：是否可以将事件传递给底层 iframe？

【发布时间】：2019-10-05 11:02:46

【问题描述】：

我有一个在 iframe 中呈现 YouTube 视频的 React 组件。为了让 UI 看起来更好看，我们希望在视频底部用一个弧线“遮盖”视频，这样它的边框似乎就有点圆了。

所以我天真地创建了一个包含弧形掩码的 div，并使用 position:absolute 将其定位在 iframe 的底部上方。

但是，我注意到任何点击事件现在都被此 div “捕获”，并且不再到达底层 iframe。实际上，这意味着 YouTube 的 UI 元素（例如位置栏）不能再使用了。

有没有办法通过 React 组件将点击（和触摸）事件传递到底层 iframe？我什至尝试在componentDidMount 上手动将常规 html div 添加到 React 容器的 DOM，但这也不起作用。

【参考方案1】：

将pointer-events: none 添加到底层div。 Example

function App() 
  return (
    <div className="App">
      <div style= position: "relative", padding: 20, textAlign: 'center' >
        /* OVERLAY */
        <div
          style=
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            pointerEvents: "none",
            background: "red",
            opacity: 0.1
          
        />
        /* ANYTHING BELOW */
        <button
          style= padding: 10, fontSize: 18, cursor: 'pointer', background: 'orange', fontWeight: 'bold', color: 'white' 
        >CLICK ME EVEN IF I AM BELOW THE DIV</button>
      </div>
    </div>
  );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>