如何在iframe上方添加透明层监听点击事件，有没有更优实现方案？

最优解：直接监听iframe点击事件 #

根据iframe的可控性和跨域状态，有两种可行的直接监听方案：

• 同源场景（iframe地址与父页面同协议、同域名、同端口）
  直接获取iframe的文档对象绑定点击事件即可，示例代码：

  const iframe = document.querySelector('iframe')
  // 等待iframe加载完成后绑定事件，避免获取不到contentDocument
  iframe.addEventListener('load', () => {
    iframe.contentDocument.addEventListener('click', () => {
      console.log('iframe被点击了')
    })
  })
  

• 跨域但iframe内容可控场景
  可以通过postMessage实现跨域通信：
  1. 在iframe内部的页面代码中绑定点击事件，触发时向父页面发消息：

  // iframe内部页面代码
  document.addEventListener('click', () => {
    window.parent.postMessage('iframe_click', '*') // 生产环境建议替换*为父页面的实际域名
  })
  

  2. 父页面监听message事件，判断消息内容后执行对应逻辑：

  // 父页面代码
  window.addEventListener('message', (e) => {
    if (e.data === 'iframe_click') {
      console.log('iframe被点击了')
    }
  })
  

备选方案：透明遮罩层纯CSS实现 #

不需要用JavaScript计算尺寸位置，仅用CSS就能实现遮罩层和iframe完全重合，且不受HTML元素顺序影响：

1. HTML结构：给iframe外层套一个相对定位的容器，把遮罩层和iframe都放在容器内

<div class="iframe-wrapper">
  <!-- 遮罩层写在iframe前面也不影响层级 -->
  <div class="iframe-overlay"></div>
  <iframe src="xxx" frameborder="0"></iframe>
</div>

2. CSS样式：

.iframe-wrapper {
  position: relative;
  /* 你需要的iframe尺寸，也可以设为自适应 */
  width: 600px;
  height: 400px;
}
.iframe-wrapper iframe,
.iframe-wrapper .iframe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.iframe-wrapper iframe {
  z-index: 0;
}
.iframe-wrapper .iframe-overlay {
  z-index: 1;
  background: transparent; /* 透明 */
}

之后直接监听.iframe-overlay的点击事件即可。如果需要既监听点击又不影响iframe内部的正常交互，建议优先使用前面的直接监听iframe方案，因为遮罩层默认会拦截所有iframe的操作。

内容的提问来源于stack exchange，提问作者Snookums