标题: 网课挂机js自动点击消除网页模态对话框

创建: 2025-07-28 15:55
更新:
链接: https://scz.617.cn/web/202507281555.txt

梦中，有时需要听一些网课，但实际又不想听。偏偏这些网课会统计学习时长，不听
就没有时长，没有时长就会有麻烦。这是一种什么样的场景呢？

熟悉WEB前端的，会看js，看它如何统计学习时长，如何提交学习时长。不熟WEB前端
的，可以硬挂机。办法之一是在虚拟机中开Chrome听网课，RDP上去瞅两眼，切走RDP
并不会导致Chrome失焦，仍判定你在学习中。

这类网课方没几个好人，它们会每隔一段时间弹一个模态对话框，停止播放，之后学
习时长不再递增，需要人工交互，点击消除模态对话框，才会继续播放。一节2小时
的网课，弹你6次模态对话框，每20分钟弹1次。它们这样干的初心是不让你痛快地挂
机，就是要形式主义地耗干你。

一个直白的想法是，用js自动点击消除模态对话框，痛快地一次性挂完2小时。更复
杂的想法是自动寻找并播放下一节网课，这种就算了。2小时人工介入一次，性价比
足矣。

那么如何实现这样的js，又如何让它生效呢？对于WEB前端程序员，这纯属小菜中的
小菜。但大多数遭遇此场景的人，并非WEB前端程序员，本文面向TA们科普一二。

省流版，直接拖到文末，用最后那段代码。但是，很可能不直接适用于你遭遇的场景，
需根据原理自行修改querySelector()中的约束条件。所以，还是别省流了。

假设网课页面弹框提示"您已学习20分钟了，让眼睛休息一下吧"，需点击"继续学习"
按钮。鼠标右键选中"继续学习"，选Inspect，附近的DOM元素如下:

--------------------------------------------------------------------------
<div class="dialog-button-container">
  <button type="button" style="background-color: rgb(192, 19, 13); margin-left: 0px;">继续学习</button>
</div>
--------------------------------------------------------------------------

此处假设网课方没有对付F12，一般这种垃圾网课没闲心对付F12，真要对付了，那就
是另有生物为虎作伥，再说。

只要js通过DOM API找到button，就能调用它的click()函数，相当于人工点击消除模
态对话框，整件事的技术原理很简单。

针对上例，在F12 Console中尝试各种方案寻找目标button:

--------------------------------------------------------------------------
/*
 * 推荐方案，简洁
 */
document.querySelector('.dialog-button-container button')
--------------------------------------------------------------------------
/*
 * 本质同之前的方案，多一些约束条件
 */
document.querySelector('.dialog-button-container button[style*="background-color"]')
--------------------------------------------------------------------------
/*
 * 本质同之前的方案，更严格的嵌套关系检查
 *
 * 要求dialog-button-container的直接子元素是button，孙子元素不匹配
 */
document.querySelector('.dialog-button-container > button')
/*
 * first-child
 * last-child
 */
document.querySelector('.dialog-button-container button:first-child')
/*
 * nth-child()序号从1开始计
 */
document.querySelector('.dialog-button-container button:nth-child(1)')
--------------------------------------------------------------------------
/*
 * [0]表示第0个元素，根据实际情况指定数组下标
 */
document.getElementsByClassName('dialog-button-container')[0].querySelector('button')
--------------------------------------------------------------------------
/*
 * 通过背景色查找，不太推荐，但有些情况挺适用
 */
document.querySelector('button[style*="background-color: rgb(192, 19, 13)"]')
--------------------------------------------------------------------------
/*
 * 查找包含"继续学习"文本的按钮
 */
var buttons = document.querySelectorAll('button');
var button  = Array.from(buttons).find(btn => btn.textContent.includes('继续学习'));
console.log( button );
--------------------------------------------------------------------------
/*
 * 本质同之前的方案
 */
var button  = Array.from(document.querySelectorAll('.dialog-button-container button'))
    .filter(btn => btn.textContent.trim() === '继续学习')[0];
console.log( button );
--------------------------------------------------------------------------
/*
 * 本质同之前的方案
 */
function findButtonByText (text) {
    return [...document.querySelectorAll('button')].find(btn => btn.textContent.trim() === text);
}
var button  = findButtonByText('继续学习');
console.log( button );
--------------------------------------------------------------------------
/*
 * 本质同之前的方案，多一些约束条件
 *
 * closest()从当前按钮向上查找，检查是否被dialog-button-container元素包裹
 */
var buttons = document.querySelectorAll('button');
var button  = [...buttons].find(btn =>
    btn.closest('.dialog-button-container') &&
    btn.textContent.includes('继续学习')
);
console.log( button );
--------------------------------------------------------------------------
/*
 * 使用XPath通过文本查找
 */
document.evaluate("//button[contains(text(), '继续学习')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
--------------------------------------------------------------------------

寻找目标button的方案很多，就用第一种推荐方案好了，简洁。假设已在网课弹框状
态，前述各种方案均能在F12 Console中看到输出:

<button ...>继续学习</button>

找到目标button后，调用它的click()函数，模态对话框将消除。试举一例:

--------------------------------------------------------------------------
document.querySelector('.dialog-button-container button').click()
--------------------------------------------------------------------------

上例相当于点击了一次按钮，而我们需要自动点击后续可能出现的按钮。最简单的办
法，在F12 Console中执行下列代码:

--------------------------------------------------------------------------
var x   = setInterval(()=>{document.querySelector('.dialog-button-container button').click()},30*1000);
--------------------------------------------------------------------------

意思是，每30秒尝试找到目标button并调用click()。可根据实际情况微调30秒间隔，
间隔不要太小，会增加负载。目标button显然是动态生成的，并非时时刻刻都能找到，
找不到时，将试图调用"null.click()"，会报错。好消息是，报错不影响最终目的，
不用理它。

强迫症、洁癖患者会处理找不到button的情形，试举一例:

--------------------------------------------------------------------------
/*
 * 仅当找到button时才调用click()
 */
var x   = setInterval(() => {var button=document.querySelector('.dialog-button-container button');if(button){button.click()}},30*1000);
--------------------------------------------------------------------------

由于x保存了循环定时器，需要时可用clearInterval(x)清除循环定时器。

Chrome的F12 Console关闭后，setInterval()不会自动清除，但x变量会丢失。建议
网课挂机时保持F12 Console，不要关闭。

有人可能想到油猴脚本、Chrome插件等，想用就用吧，反正我不用。我比较喜欢半自
动，不喜欢全自动。理解原理后，面对不同网课弹框，自行修改querySelector()中
的约束条件。

本文面向非WEB前端程序员、有网课挂机需求的群体，需要一点点F12知识。实在看不
明白，也无从操作起，那就算了，权当没看过。

最后小结一下技术原理:

a. 鼠标右键Inspect目标按钮，打开"开发者工具"，焦点停留在目标DOM元素
b. js找到button并调用click()
c. 用setInterval()重复b步骤