学习公社学习20分钟‘休息弹窗‘ 解决方案

在党校平台视频连续学习20分钟会出现以下弹窗,非常影响学习效率
I.初步分析
分析后得到关键js代码

!t && B && F > 0 && 0 == 60 * L % F && 
(console.log(">>>touch restTime; playCount=" + L),
 exitFullscreen(), 
J("您已学习" + Math.round(F / 60) + "分钟了,让眼睛休息一下吧"), videoPause())

发现在视频持续学习一定的时间后,会调用J()函数,并且赋予参数 学习时长字符串和videoPause()函数,由于平台对代码进行了压缩,我们大致可以猜出J()函数的调用是为了弹窗博客最前边所示的对话框,并暂停视频的播放,让视频学习者点击确认,确保学习者没有刷学习时长的嫌疑后,再次进行视频播放记录学习时间。
videoPause()函数:

window.videoPause = function() {
        A.pause()
    }, window.videoPlay = function() {
        A.play()
    };
    var J = function(e) {
        var a = t.dialog({
            boxid: "rest_tip",
            title: "提示",
            width: 380,
            modal: !0,
            content: '<span style="display:block;text-align: center;">' + e + "</span>",
            buttons: [{
                text: "继续学习",
                css: {
                    backgroundColor: "#c0130d"
                },
                click: function() {
                    videoPlay(), a.close()
                }
            }]
        })
    },

阅读代码后发现,在弹出对话框后进行了视频暂停,在点击确认后,视频又重新开始播放。
II.关键解决方案代码
在了解了平台实现逻辑后,我们此部分开始解决上述问题。既然网页端弹出来一个对话框,需要我们点击确认后才可以继续记录学习时长,那我们最关键的问题就是获取该对话框的确认按钮的标签,然后再模拟浏览器点击行为,从而完美解决。
等待弹出对话框,按下F12(笔记本可能是Fn+F12)打开开发者模式,找到该弹出对话框的HTML代码:

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

发现了确认按钮的标签,是类名为“dialog-button-container” div 下的"button"标签,随后使用JS代码获取该标签,本例中由于平台中引入了jQuery,我们使用jQuery获取:
 let dialog = $('.dialog-button-container button')
然后使用一个定时器不断获取页面中的dialog标签,并进行模拟浏览器点击:

var openClick = setInterval(function() {
    let dialog = $('.dialog-button-container button')
    dialog.click()
    console.log("正在监测弹出对话框...")
}, 1000)

最后一步就是在视频播放页面,按下F12(笔记本可能是Fn+F12)打开开发者模式,点击Console(控制台),输入上述代码后按回车键即可:

 综上完美解决休息弹窗,不关闭调试界面即可不间断学习。

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值