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

欢迎大家来到IT世界,在知识的湖畔探索吧!

 
     

  继续学习

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

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

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

欢迎大家来到IT世界,在知识的湖畔探索吧!/*
 * 推荐方案，简洁
 */
document.querySelector('.dialog-button-container button')

/*
 * [0]表示第0个元素，根据实际情况指定数组下标
 */
document.getElementsByClassName('dialog-button-container')[0].querySelector('button')

欢迎大家来到IT世界,在知识的湖畔探索吧!/*
 * 通过背景色查找，不太推荐，但有些情况挺适用
 */
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 );

欢迎大家来到IT世界,在知识的湖畔探索吧!/*
 * 使用XPath通过文本查找
 */
document.evaluate("//button[contains(text(), '继续学习')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue

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

继续学习

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

欢迎大家来到IT世界,在知识的湖畔探索吧!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的情形，试举一例:

欢迎大家来到IT世界,在知识的湖畔探索吧!/*
 * 仅当找到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步骤