求助：判断用户关闭浏览器-beforeunload事件

hibanz

我这里有一个视频连续播放的网页，每段视频播放结束就自动弹窗是否选择下个视频，

我已经实现了自动默认选择是，但是接着又会弹窗另一个window窗体

点击离开后，才能接着播放下一个视频。这个弹窗是window窗体，弹出时，浏览器无法点击操作。

查看后台JS，发现是调用beforeunload事件

这个beforeunload事件附带有其他必须的操作，所以无法避免，有没有什么办法自动化这个窗体的选择，非常感谢交流！

李恒道

window窗体那个叫模态框
一般由window.alert/window.confirm之类的触发的
看他用的哪个函数直接hook掉返回特定的默认值就好了

hibanz

李恒道 发表于 2022-10-31 10:45
window窗体那个叫模态框
一般由window.alert/window.confirm之类的触发的
看他用的哪个函数直接hook掉返回 ...

这个hook掉，具体是怎么操作呢！？

我还是脚本小白。

steven026

把$(window).bind……这段代码复制一遍，然后去掉最后一行return
写进脚本就行

李恒道

hibanz 发表于 2022-10-31 11:04
这个hook掉，具体是怎么操作呢！？

我还是脚本小白。

steven026解答了
我刚才说错了
直接卸载掉原函数然后重新复写一遍就好了

hibanz

steven026 发表于 2022-10-31 11:14
把$(window).bind……这段代码复制一遍，然后去掉最后一行return
写进脚本就行

(function() {
    'use strict';
    // Your code here...

    var vBtn = document.querySelector('.ccH5PlayBtn');

    console.log("1ccH5PlayBtn is: "+$('ccH5PlayBtn').length);
    console.log("1video is: "+$('video').length);

    function AutoClick(vBtn) {
        var tm = window.setInterval(() => {
            vBtn.click();
            window.clearInterval(tm);
        }, 1000);
    }

    setTimeout(() => {
        AutoClick($('.ccH5PlayBtn'));
        console.log("3video is: "+$('video').length);

        var v = document.querySelector('video');

            v.addEventListener("ended", function () { //结束
                console.log("播放结束");

                setTimeout(() => {
                    console.log($('.layui-layer-btn0').length);

                    var btn = document.querySelector('.layui-layer-btn0');
                    
                    var tm2 = window.setInterval(() => {
                        btn.click();
                        window.clearInterval(tm2);
                    }, 1000);
                    
                    $(window).bind("beforeunload", function (e) {
                        console.log("beforeunload");
                        var isRes = saveHistory();
                        e.returnValue = false;
                        sleep(100);//延迟 保证先保存记录再刷新或者关闭页面
                        //return isRes;
                    });
                }, 1000);

            }, false);// end of addEventListener

    }, 1000);//end of setTimeout

})();//end of function()



以上是我的代码，添加了没有return的段，但是还是先执行了后台的js，再执行这段。
请问是代码插入的位置不对吗！？

steven026

hibanz 发表于 2022-10-31 14:21
(function() {
    'use strict';
    // Your code here...

我试了下jQuery的bind有点怪……
你写成这样吧

1.                     window.onbeforeunload= function () {
   
2.                         console.log("beforeunload");
   
3.                         var isRes = saveHistory();
   
4.                         sleep(100);//延迟 保证先保存记录再刷新或者关闭页面
   
5.                     });

复制代码

hibanz

我再次尝试了，依然不行。

我又再次查看了后台JS代码，其中：
//刷新、关闭浏览器和切换视频（因为切换视频会刷重新定向到studyduration/index）会执行beforeunload方法，浏览器弹出离开提示，
//执行顺序为保存看课记录并且浏览器弹出离开的提示框，点击确定后刷新或关闭或切换。
//如果浏览器打开没有做任何操作，这时候刷新、关闭浏览器，chrome不会弹出离开的提示框，会造成先执行跳转，再保存看课记录
//也就是必须交互一下浏览器才会触发离开提示，因为有了提示才会先SaveHistory再执行a标签的href
$(window).bind("beforeunload", function (e) {
    console.log("beforeunload");
    var isRes = saveHistory();
    e.returnValue = false;
    sleep(500);//延迟 保证先保存记录再刷新或者关闭页面
    return isRes;
});

好像不是代码插入的问题

cxxjackie

jQuery处理比较简单，先unbind解绑原事件，再自己重新绑一个上去，重点是去掉returnValue这一行：

1. $(window).unbind('beforeunload').bind('beforeunload', e => {
   
2.     console.log("beforeunload");
   
3.     var isRes = saveHistory();
   
4.     sleep(500);
   
5.     return isRes;
   
6. });

复制代码

hibanz

以上重写bind的方式都试过了，还是不行，不知道是什么原因。

我又重新查看了页面元素，第一个选择页面

“是”有一个事件监听器，我使用事件拦截，也无法拦截这个事件

btn.addEventListener("click",(e)=>{
 e.preventDefault()
console.log("click on this");
})

我已经不知道要怎么进行下去了，有点想放弃了！！！