如何实现点击任意iframe内容时触发父页面函数隐藏指定div？

我想要创建一个可复用函数，实现点击iframe内任意位置时隐藏iframe外的特定div。该div是一个可覆盖在iframe上方（z-index层级）的搜索菜单，我希望在点击菜单外部（即全屏iframe内）时关闭它。尝试过相关方案，但更换URL后失效；目前已写出可运行的重复代码，但想要更通用的实现方式。现有重复代码如下：

const iframeListener1 = addEventListener('blur', function() {
  if (document.activeElement === document.getElementById('chrono-loader')) {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
  removeEventListener('blur', iframeListener);
});

const iframeListener2 = addEventListener('blur', function() {
  if (document.activeElement === document.getElementById('plus-loader')) {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
  removeEventListener('blur', iframeListener);
});

const iframeListener3 = addEventListener('blur', function() {
  if (document.activeElement === document.getElementById('google-docs-1-loader')) {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
  removeEventListener('blur', iframeListener);
});

const iframeListener4 = addEventListener('blur', function() {
  if (document.activeElement === document.getElementById('google-sheets-2-loader')) {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
  removeEventListener('blur', iframeListener);
});

const iframeListener5 = addEventListener('blur', function() {
  if (document.activeElement === document.getElementById('google-docs-3-loader')) {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
  removeEventListener('blur', iframeListener);
});

const iframeListener6 = addEventListener('blur', function() {
  if (document.activeElement === document.getElementById('google-docs-4-loader')) {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
  removeEventListener('blur', iframeListener);
});

请问如何实现点击任意iframe时触发函数隐藏该指定div？

核心思路 #

不用给每个iframe单独绑定监听，而是通过全局焦点变化事件统一处理，同时解决iframe URL更换后失效的问题——直接监听iframe的焦点状态，不受其内部URL变化影响。

可复用实现代码 #

// 定义全局监听函数，避免重复创建
function handleIframeFocusBlur() {
  // 判断当前获取焦点的元素是否为iframe
  if (document.activeElement.tagName === 'IFRAME') {
    $('#outer-layer-card').stop().fadeOut('fast');
  }
}

// 绑定一次全局blur事件即可
window.addEventListener('blur', handleIframeFocusBlur);

// 可选：页面销毁时移除监听，避免内存泄漏
// window.removeEventListener('blur', handleIframeFocusBlur);

优化说明 #

1. 通用性：无需指定单个iframe的ID，页面内任意iframe获取焦点（即点击iframe内部）都会触发隐藏操作，iframe更换URL后依然有效。
2. 简洁性：用一个全局监听函数替代原有的重复代码，大幅减少冗余。
3. 扩展性：新增iframe时无需修改代码，自动适配所有iframe元素。

额外优化（可选） #

如果搜索菜单有显示/隐藏状态，可以增加状态判断，避免重复执行淡出操作：

function handleIframeFocusBlur() {
  const $menu = $('#outer-layer-card');
  if (document.activeElement.tagName === 'IFRAME' && $menu.is(':visible')) {
    $menu.stop().fadeOut('fast');
  }
}

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