收藏NO.018-处理网页广告弹窗的小技巧——By.杭州组
作者：南吕、乔非
关键词：z-index、广告弹窗
一、背景
广告弹窗常常会打断RPA对网页的正常操作，带来不必要的麻烦。
我们可以观察到有部分的广告弹窗是由网页中的 JavaScript 代码触发，它们通常采用弹出窗口或覆盖元素的方式展示广告，将其他网页元素遮盖。因此可以使用 CSS 的 z-index 属性解决这个问题，通过设置弹窗或网页元素的层叠顺序，将弹窗置于其他网页元素之下，从而保证网页元素的正常展示。
二、解决思路
在 CSS 中，使用 z-index 属性来调整页面元素的层叠顺序。通过修改元素的 z-index 属性，可以将它们从其他元素上方移动或移到其他元素下方。
那么如何用影刀修改元素 z-index 属性？
使用 指令【执行JS脚本】来获取&修改 z-index 属性
例如：获取了一个 ID 为 myElement 的 HTML 元素的 z-index 值，然后将其 z-index 属性设置为 10
1. 使用 document.getElementById() 方法或其他选择器方法获取所需的元素
const element = document.getElementById("myElement");
2. 使用 getComputedStyle() 和 getPropertyValue() 方法来获取z-index 值
const styles = window.getComputedStyle(element);
const zIndex = styles.getPropertyValue('z-index');
3. 使用 .style.zIndex 属性来分配新的 z-index 值
element.style.zIndex = "10";
三、使用示例
3.1 移动大于指定层级的元素，使其位于页面最下层
获取 z-index 值大于指定值的元素，修改其 z-index 属性值为‘-1’
具体实现步骤如下：```
//具有大于99的z-index的元素，会被调整其z-index值为-1
//获取到所有的元素
var elements = document.querySelectorAll("*");
for (var i = 0; i < elements.length; i++) {
//获取每个元素的计算样式，其中包括z-index属性值
//通过parseInt()将该值转换为整数格式
var zIndex = parseInt(window.getComputedStyle(elements[i]).zIndex);
if (!isNaN(zIndex) && zIndex > 99) {
elements[i].style.zIndex = "-1";
}
}
```
注意：如果想要撤销这个更改，可以刷新网页或者将 z-index 值恢复为原来的值。
3.2 获取网页上最上层的元素(广告弹窗)，返回该元素的 XPath 路径，再对元素处理
3.2.1 获取所有元素的 z-index 属性值，并找到具有最大 z-index 值的元素对象
具体实现步骤如下：```
function getMaxZIndexElement() {
//获取到所有的元素
var elements = document.querySelectorAll("*");
var maxIndex = -Infinity;
//如果没有找到任何具有有效z-index属性值的元素，返回null
var maxElement = null;
for (var i = 0; i < elements.length; i++) {
//获取每个元素的计算样式，其中包括z-index属性值
var zIndex = parseInt(window.getComputedStyle(elements[i]).zIndex);
//在循环中比较当前z-index值和已知的最大值，并把当前元素作为最大z-index值的元素
if (!isNaN(zIndex) && zIndex > maxIndex) {
maxIndex = zIndex;
maxElement = elements[i];
}
}
//返回具有最大z-index值的元素对象
return maxElement;
}
```
3.2.2 使用递归的方式来获取元素的完整 XPath 路径
具体实现步骤如下：```
//如果传入的元素为空或不是一个 ELEMENT_NODE 节点，则返回一个空字符串
function getElementXPath(element) {
if (element && element.nodeType === Node.ELEMENT_NODE) {
const index = getElementIndex(element);
const parentPath = getElementXPath(element.parentNode);
return `${parentPath}/${element.tagName.toLowerCase()}[${index}]`;
} else {
return '';
}
}
//获取一个元素在其兄弟节点中的位置
function getElementIndex(element) {
let index = 1;
const siblings = element.parentNode.childNodes;
for (let i = 0; i < siblings.length; i++) {
if (siblings[i] === element) {
return index;
}
if (siblings[i].nodeType === Node.ELEMENT_NODE && siblings[i].tagName === element.tagName) {
index++;
}
}
return -1;
}
```
以上代码可以获取元素的绝对 XPath 路径，即相对于 html 元素的路径，如果需要获取相对于某个父元素的相对路径，只需在递归时额外传入一个参数表示相对层级即可。
完整代码如下：
```
function getMaxZIndexElement() {
var elements = document.querySelectorAll("*");
var maxIndex = -Infinity;
var maxElement = null;
for (var i = 0; i < elements.length; i++) {
var zIndex = parseInt(window.getComputedStyle(elements[i]).zIndex);
if (!isNaN(zIndex) && zIndex > maxIndex) {
maxIndex = zIndex;
maxElement = elements[i];
}
}
var maxElementxPath = getElementXPath(maxElement)
return maxElementxPath;
function getElementXPath(element) {
if (element && element.nodeType === Node.ELEMENT_NODE) {
const index = getElementIndex(element);
const parentPath = getElementXPath(element.parentNode);
return `${parentPath}/${element.tagName.toLowerCase()}[${index}]`;
} else {
return '';
}
}
function getElementIndex(element) {
let index = 1;
const siblings = element.parentNode.childNodes;
for (let i = 0; i < siblings.length; i++) {
if (siblings[i] === element) {
return index;
}
if (siblings[i].nodeType === Node.ELEMENT_NODE && siblings[i].tagName === element.tagName) {
index++;
}
}
return -1;
}
}
```
运行效果：
3.3 移动操作目标元素，使其位于页面最上层，再对元素操作
修改目标元素的 z-index 值，使其移动到页面最上方
具体实现步骤如下：1. 传入目标元素‘侧边栏’
2. 使用 .style.zIndex 属性来设置新的 z-index 值
element.style.zIndex = "999999";
运行效果：
四、其他方法处理网页弹窗
1.通过插件解决：完美解决网页乱弹广告问题----By华南组
3.分析网页的规律，找到广告框所在的div等标签，通过设置该标签的style属性值为display:none来过滤
收藏8
