要检测弹层,自然首先要定义弹层,弹层一般有以下特性:●置于顶层占领屏幕或是屏幕大部分面积,遮住其他内容且难以忽略或绕开,强制用户进行交互(关闭 or 跳转)●置于顶层的占据屏幕较小区域,通常为banner图片或提醒添加到首页等提示性弹层,不影响用户交互其中交互包括:接收到click、touch、滑动、页面隐藏/销毁等事件
上述算法已将可能的第一类弹层全部挑出,在此基础上我们通过视觉坐标定位的方式尽可能的收集出第二类弹层元素。首先可以明确的一点是业务写的前端弹层基本在以下6种形式呈现在页面中:通过观察发现我们只需要对页面特定区域进行检测即可找出可能存在的第二类弹层。因此方案设计如下:遍历第一类候选弹层的所有element,对每个element进行如下操作:●获取元素相对于视口位置的width和height●通过document.elementsFromPoint 方法挑出如下特定坐标的所有HTML元素,加入到数组集合candidateElement中页面初始渲染时,在第一次 Dom 变更记录中 Records 的最外层必定存在一个覆盖整个视口面积的div元素,因此这个元素一定存在于第一类弹层的检测结果中。这也自然将手机屏幕中的这些特定位置坐标点加到了我们筛选出的特定坐标中,保证了之前提到的6种弹层能全部检测到。为了更全面的搜索其他未知区域的弹层,我们也将其他第一类候选弹层的特征点加入进来,进一步扩大弹层搜索的区域范围。相比遍历每帧的所有元素,此算法只需遍历个位数级别的元素,大大降低算法复杂度且搜索精度极高,适合运行时的动态检测。