如何解决 iframe 无法触发 clickOutside

如何解决 iframe 无法触发 clickOutside

 

前言

在公司的一次小组分享会上， 组长给我们分享了一个他在项目中遇到的一个问题。在一个嵌入 iframe 的系统中，当我们点击按钮展开 Dropdown 展开后，再去点击 iframe 发现无法触发 Dropdown 的 clickOutside 事件，导致 Dropdown 无法关闭。

查看在线示例

为什么无法触发 clickOutside

目前大多数的 UI 组件库，例如 Element、Ant Design、iView 等都是通过鼠标事件来处理， 下面这段是 iView 中的 clickOutside 代码，iView 直接给 Document 绑定了 click 事件，当 click 事件触发时候，判断点击目标是否包含在绑定元素中，如果不是就执行绑定的函数。

bind (el, binding, vnode) {
  function documentHandler (e) {
    if (el.contains(e.target)) {
      return false;
    }
    if (binding.expression) {
      binding.value(e);
    }
  }
  el.__vueClickOutside__ = documentHandler;
  document.addEventListener('click', documentHandler);
}

但 iframe 中加载的是一个相对独立的 Document，如果直接在父页面中给 Document 绑定 click 事件，点击 iframe 并不会触发该事件。

知道问题出现在哪里，接下来我们来思考怎么解决？

给 iframe 的 body 元素绑定事件

我们可以通过一些特殊的方式给 iframe 绑定上事件，但这种做法不优雅，而且也是存在问题的。我们来想想一下这样一个场景，左边是一个侧边栏(导航栏)，上面是一个 Header 里面有一些 Dropdown 或是 Select 组件，下面是一个页面区域。

但这些页面有的是嵌入 iframe，有些是当前系统的页面。如果使用这种方法，我们在切换路由的时候就要不断的去判断这个页面是否包含 iframe，然后重新绑定/解绑事件。而且如果 iframe 和当前系统不是同域（大多数情况都不是同域的），那么这种做法是无效的。

添加遮罩层

我们可以通过给 iframe 添加一个透明遮罩层，点击 Dropdown 的时候显示透明遮罩层，点击 Dropdown 之外的区域或遮罩层，就派发 clickOutside 事件并关闭遮罩层，这样虽然可以触发 clickOutside 事件，但存在一个问题，如果用户点击的区域正好是 iframe 页面中的某个按钮，那么第一次点击是不会生效的，这种做法对于交互不是很友好。</