如何实现点击iframe指定区域时隐藏页面三个悬浮按钮的功能

前提说明：如果iframe对应的页面域名和当前父页面域名同源（协议、域名、端口三者完全一致），可以直接监听iframe内部的点击事件；如果不同源，需要iframe侧的代码配合发送跨域消息才能实现交互。

1 修正CSS样式 #

首先给悬浮按钮增加层级属性，保证按钮浮在iframe上方，点击按钮时不会触发iframe的点击事件，同时新增隐藏按钮的公共样式：

/* 原有三个按钮的样式内新增z-index属性，保证层级高于iframe */
.iframe-button {
  position: absolute;
  top: 180px;
  left: 32px;
  background-color: #3366cc;
  border: none;
  color: white;
  padding: 21px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 11px;
  z-index: 10; /* 新增层级 */
}
.iframe-button2 {
  position: absolute;
  top: 88px;
  left: 30px;
  background-color: #d9d9d9;
  border: none;
  color: #000000;
  padding: 9px 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  z-index: 10; /* 新增层级 */
}
.iframe-button3 {
  position: absolute;
  top: 129px;
  left: 35px;
  background-color: #d9d9d9;
  border: none;
  color: #000000;
  padding: 11px 12.5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  z-index: 10; /* 新增层级 */
}

/* 新增隐藏按钮的样式 */
.frame-container.hide-buttons .iframe-button,
.frame-container.hide-buttons .iframe-button2,
.frame-container.hide-buttons .iframe-button3 {
  display: none;
}

2 修正HTML小问题 #

你现有代码里的iframe标签重复写了闭合逻辑，修改为标准写法：

<iframe scrolling="no" width="370" height="363" frameborder="0" target="_self" src="test.com"></iframe>

3 添加交互逻辑 #

场景A：iframe与父页同源 #

直接在父页添加如下JS代码即可，你可以自行修改判断条件匹配你需要的「指定区域」：

const frameContainer = document.querySelector('.frame-container');
const iframe = document.querySelector('iframe');

iframe.addEventListener('load', () => {
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  // 监听iframe内部的点击事件
  iframeDoc.addEventListener('click', (e) => {
    // 这里替换为你指定区域的判断逻辑，比如判断点击元素是否为指定类的元素
    // 示例：点击类名为.target-area的元素时触发隐藏
    if (e.target.closest('.target-area')) {
      frameContainer.classList.add('hide-buttons');
    }
    // 如果是按坐标判断指定区域，可以用如下写法
    // const clickX = e.clientX;
    // const clickY = e.clientY;
    // if (clickX > 50 && clickX < 200 && clickY > 50 && clickY < 200) {
    //   frameContainer.classList.add('hide-buttons');
    // }
  })
})

场景B：iframe与父页不同源 #

需要先在iframe所属的页面内添加如下代码，点击指定区域时给父页发消息：

// iframe内部页面的JS代码
document.addEventListener('click', (e) => {
  // 同样替换为你指定区域的判断逻辑
  if (e.target.closest('.target-area')) {
    window.parent.postMessage({
      type: 'hideIframeButtons'
    }, '*');
    // 安全起见可以把*替换为父页的实际域名，比如'https://你的父页域名.com'
  }
})

然后在父页添加监听消息的JS代码：

const frameContainer = document.querySelector('.frame-container');
window.addEventListener('message', (e) => {
  // 验证消息来源，避免恶意消息
  if (e.data.type === 'hideIframeButtons') {
    frameContainer.classList.add('hide-buttons');
  }
})

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