web游览器的标签页仿 ios mac 苹果的墓碑机制 (js代码)

背景:

本来项目开发系统防挂机功能,在其余游览器中均可以使用。但是呢在苹果的safair游览器中会出现几率失效,最后经过排查发现是苹果的墓碑机制导致。即:此标签页活跃,其他标签页假死。然后就导致防挂机失效了。

原理:

假如当前游览器中有3个标签页分别是A,B,C,每个标签页都有倒计时。正常情况下,每个标签页都会倒计时。但是苹果游览器只会有一个标签页A正常倒计时,其余的B,C 倒计时不生效。

所以就需要仿墓碑机制进行开发。原理如下:

A标签页打开时,B和C标签页不活跃;

当打开其他标签页,ABC处于后台时候,最近操作的一个标签页处于活跃;

核心逻辑代码:

    //分钟数
         var min;
        var timeLeft; 
        var timer=null; 
        var IsnewRequest = false;
        var StayTimer = null;
        function resetTimer() {
            backInit();
        }

        function uuid(len, radix) {
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [], i;
            radix = radix || chars.length;

            if (len) {
                // Compact form
                for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
            } else {
                // rfc4122, version 4 form
                var r;

                // rfc4122 requires these characters
                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                uuid[14] = '4';

                // Fill in random data.  At i==19 set the high bits of clock sequence as
                // per rfc4122, sec. 4.1.5
                for (i = 0; i < 36; i++) {
                if (!uuid[i]) {
                    r = 0 | Math.random()*16;
                    uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                }
                }
            }

            return uuid.join('');
        }


        function GetBigTime() {

            //判断:如果有其他页面打开,则赋值最大倒计时值,如果< 10 退出
            //1,获取所有的time
            //2,取最大的时间
            //3,如果最大的时间<10 则不管;
            var countDownKeyList= [];    
            var localStorageKeys = Object.keys(localStorage)
            for (var i=0;i<localStorageKeys.length;i++) {        
                var item = localStorageKeys[i];
                if(item.indexOf("CountDown")!=-1)
                {
                countDownKeyList.push(item);
                }                  
            }

            var countDownValueList= [];    
            for(var i= 0; i<countDownKeyList.length;i++)
            {
                var value = localStorage.getItem(countDownKeyList[i]);
                countDownValueList.push(value);
            }

            //验证最大时间
            var bigTime = countDownValueList.sort().reverse()[0];
            //if(Number(bigTime)>=3)
            if(Number(bigTime)>=3 && Number(bigTime) != 19999999)            
            {
                //取运行中的倒计时最大值;      
                window.localStorage.setItem(window.CountDown,bigTime); 
                return false;
            }
            else
            {
                window.localStorage.removeItem(window.CountDown); 
                return true;
            }

        }

        function  ShowCountDown (second){
            const s = second % 60;
            const m = Math.floor(second / 60);
            return `${`00${m}`.slice(-2)} : ${`00${s}`.slice(-2)}`;
        };  


        function reSetTimeoutInit()
        {
            window.localStorage.setItem("checkClose","1");
            setTimeout(function(){
            //1秒后执行刷新          
            window.localStorage.removeItem('checkClose');
            }, 1000); //单位是毫秒   
            setTimeoutInit();
        }

        var IsResetTime = false;
        function setTimeoutInit() {
             
            this.IsnewRequest = true;
            //默认无操作时间为15分钟
            min = 15;
            let value = window.localStorage.getItem("InvalidTime");    
            //如果取不到session值 则默认15分钟
            if(value!=null && value!=undefined)
            {
                min =  Number(value);                 
            }            

  

            //清理之前的倒计时
            clearInterval(StayTimer);


            //没有唯一标识,则生成
            if(window.CountDown==''||window.CountDown==undefined)
            {      
                window.CountDown = "CountDown"+this.uuid(8,2);                
            }

            //设置初始倒计时
            var MainTime = min * 60;            
            window.localStorage.setItem(window.CountDown,MainTime);     

            StayTimer = setInterval(()=>{

                var nowTime = window.localStorage.getItem(window.CountDown);
                if(nowTime==null||nowTime=="")
                {
                    clearInterval(StayTimer);
                    return;
                }
                //获取存储倒计时
                timeLeft = Number(nowTime);            

                var localStorageKeys = Object.keys(localStorage)
                var labelList =  localStorageKeys.filter(x=> x.indexOf("CountDown")!=-1 );      
                var activeCount = 0;
                for(var i= 0; i<labelList.length;i++)
                {
                    var value = localStorage.getItem(labelList[i]);
                    var nValue =  Number.parseInt(value);
                    if(nValue!=19999999)
                    {
                    activeCount++;
                    }        
                }      

                var localStorageKeys = Object.keys(localStorage)
                var labelList =  localStorageKeys.filter(x=> x.indexOf("CountDown")!=-1 );      
                var activeCount = 0;
                for(var i= 0; i<labelList.length;i++)
                {
                    var value = localStorage.getItem(labelList[i]);
                    var nValue =  Number.parseInt(value);
                    if(nValue!=19999999)
                    {
                    activeCount++;
                    }        
                }
                //如果没有一个活跃,则重新读取
                if(activeCount==0)
                {
                    this.IsnewRequest = true;
                }

                if(this.IsnewRequest==true)
                {
                    this.IsnewRequest = false;
                    for(var i= 0; i<labelList.length;i++)
                    {
                    if(labelList[i]!=window.CountDown)
                    {
                        var value = localStorage.getItem(labelList[i])
                        localStorage.setItem(labelList[i],"19999999");
                    }
                    else
                    {
                        timeLeft = MainTime;//设置的默认值           
                        localStorage.setItem(labelList[i],MainTime);
                    }
                    }      
                }      



                if (document.hidden) {
                    //首先重置时间
                    //赋值其余的为-999
                    if(timeLeft==19999999)
                    {
                    IsResetTime = true
                    const show = ShowCountDown(timeLeft);//恢复倒计时 并且重置时间;
                    console.log("[时停],倒计时:"+timeLeft);                                                           
                    }
                    else
                    {          
                    if(IsResetTime)
                    {
                        timeLeft = MainTime;//设置的默认值           
                        IsResetTime = false;
                    }                       
                    const show = ShowCountDown(timeLeft--);//恢复倒计时 并且重置时间;
                    console.log("[独苗],倒计时:"+timeLeft);                                                           
                    }
                } else {            
                    //首先重置时间
                    //赋值其余的为-999
                    if(timeLeft==19999999)
                    {
                    IsResetTime = true
                    const show = ShowCountDown(timeLeft);//恢复倒计时 并且重置时间;
                    console.log("[时停],倒计时:"+timeLeft);                                                           
                    }
                    else
                    {          
                    if(IsResetTime)
                    {
                        timeLeft = MainTime;//设置的默认值           
                        IsResetTime = false;
                    }                       
                    const show = ShowCountDown(timeLeft--);//恢复倒计时 并且重置时间;
                    console.log("[独苗],倒计时:"+timeLeft);                                                           
                    }
                }      


                var checkShow = window.localStorage.getItem('checkShow');
                var blCheckShow =Number(checkShow);
                if(blCheckShow==1)
                {
                    timeLeft = -1;
                    setTimeout(function(){
                    //1秒后执行刷新          
                    window.localStorage.removeItem('checkShow');
                    }, 1000); //单位是毫秒                    
                }
                
                //const show = ShowCountDown(timeLeft--);
                //设置倒计时
                window.localStorage.setItem(window.CountDown,timeLeft);     
                if (timeLeft < 0) 
                {
                    //#endregion                    
                    window.localStorage.setItem('checkShow',"1");
                    var IsResetTime = false;    
                    var blresult = this.GetBigTime();
                    if(blresult==true)
                    {
                        //清理定时 
                        clearInterval(StayTimer);
                        //业务操作:
                        document.getElementsByClassName("fullScreenDiv")[0].style.display = "block";
                        document.getElementsByClassName("promptDiv")[0].style.display = "block";
                        startCountDown($("#spanCountDown").text()); 

                    }


                }                    

            },1000);



            //countTime();

            


            var vdoc = document.getElementById("ScormIframe").contentDocument;

            if (vdoc != null) {
                vdoc.addEventListener("mousemove", resetTimer, false);
                vdoc.addEventListener("mousedown", resetTimer, false);
                vdoc.addEventListener("keypress", resetTimer, false);
                vdoc.addEventListener("DOMMouseScroll", resetTimer, false);
                vdoc.addEventListener("mousewheel", resetTimer, false);
                vdoc.addEventListener("touchmove", resetTimer, false);
                vdoc.addEventListener("MSPointerMove", resetTimer, false);
            }
            else{  
            }

            if (language == "zh-CN") {
                        $("#msgInfo").html("由于长时间未操作,课件将在倒计时结束后自动关闭,系统会保存您的学习记录。");
                        $("#msgTimeout").html("如果您想继续学习,请关闭此窗口。");
                    }
                    else {
                        $("#msgInfo").html("Since there is no operation for a period of time, the courseware will be closed automatically at the end of the countdown and the learning record will be saved.");
                        $("#msgTimeout").html("If you want to continue learning, just close this window.");
                    }
        } 



        function countTime() {
                if (timeLeft == 0) {
                    document.getElementsByClassName("fullScreenDiv")[0].style.display = "block";
                    document.getElementsByClassName("promptDiv")[0].style.display = "block";
                    startCountDown($("#spanCountDown").text()); 
                }

                var startMinutes = parseInt(timeLeft / (60 * 1000), 10);
                var startSec = parseInt((timeLeft - startMinutes * 60 * 1000) / 1000)
                timeLeft = timeLeft - 1000;
                setTimeout('countTime()', 1000);
                //console.log(timeLeft);
            }

            function startCountDown(html){
                clearInterval(this.CountDownTimer);
                        this.CountDownTimer = setInterval(() => {

                            var checkClose = window.localStorage.getItem('checkClose');
                            var blCheckClose =Number(checkClose);
                            if(blCheckClose==1)                            
                            {                                
                                // $("#spanCountDown").text(60);
                                // clearInterval(this.CountDownTimer);
                                document.getElementsByClassName("fullScreenDiv")[0].style.display = "none";
                                document.getElementsByClassName("promptDiv")[0].style.display = "none";                                
                                setTimeoutInit();
                                setTimeout(function(){
                                //1秒后执行刷新
                                window.localStorage.removeItem('checkClose');
                                }, 1000); //单位是毫秒     
                            }
                            else
                            {
                                html = parseInt(html) - 1; 
                                if (parseInt(html) <= 0) {
                                    closeme();
                                }
                                $("#spanCountDown").text(html);
                            }                                                    
                            ////console.log($("#spanCountDown").text());
                        }, 1000);
            }
        function closeme() {
            var browserName = navigator.appName;
            if (browserName == "Netscape") {
                window.open('', '_parent', '');
                window.close();
            } else if (browserName == "Microsoft Internet Explorer") {
                window.opener = "whocares";
                window.close();
            }
        }


        function backInit() {

                reSetTimeoutInit();                

                // min = 15;
                // timeLeft = min * 60 * 1000;
                $("#spanCountDown").text(60);
                clearInterval(this.CountDownTimer);
                document.getElementsByClassName("fullScreenDiv")[0].style.display = "none";
                document.getElementsByClassName("promptDiv")[0].style.display = "none";
            }

 

结语:

其实就是按照墓碑机制进行仿照开发,此文章进行记录以后可以在其他平台进行此机制的开发;

 

原文链接:https://www.cnblogs.com/BFMC/p/17373669.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:web游览器的标签页仿 ios mac 苹果的墓碑机制 (js代码) - Python技术站

(0)
上一篇 2023年5月11日
下一篇 2023年5月11日

相关文章

  • JavaScript中的伪数组用法及说明

    JavaScript中的伪数组用法及说明 在JavaScript中,伪数组是一个类数组对象,具有数组的索引和遍历方法,但是没有数组的基本方法,例如push、pop、slice等。下面我们将详细讲解伪数组的用法及说明。 伪数组的特点 伪数组拥有以下特点: 具有非负整数的索引,从0开始依次递增 长度length属性与其中包含的元素数量相等 常见的伪数组有类数组对…

    JavaScript 2023年5月27日
    00
  • javascript实现简单页面倒计时

    下面是关于“javascript实现简单页面倒计时”的完整攻略。 1. 倒计时的基本概念 倒计时(Countdown)是指从一个固定时间向后计数,时间到了则触发一些既定事件的过程。在网页开发中,常见的用途包括限时抢购、秒杀活动、节假日倒计时等。 2. 倒计时的实现步骤 实现一个简单的倒计时,需要进行以下几个步骤: 2.1 计算时间差 首先,我们需要确定两个固…

    JavaScript 2023年5月27日
    00
  • JS实现利用闭包判断Dom元素和滚动条的方向示例

    下面是“JS实现利用闭包判断Dom元素和滚动条的方向示例”的完整攻略。 什么是闭包? 在JavaScript中,当函数可以访问并操作其作用域之外的变量时,就产生了闭包。 在函数内部定义一个内部函数,在内部函数中访问了外部函数的变量时,就形成了一个闭包。这个内部函数可以访问到外部函数中定义的变量,即使外部函数已经执行结束,这些变量仍然继续存在。 闭包有助于隐藏…

    JavaScript 2023年6月10日
    00
  • js如何查找json数据中的最大值和最小值方法

    当需要在 JSON 数据中查找最大值和最小值时,可以使用 JavaScript 中的 Math.max() 和 Math.min() 函数,结合遍历 JSON 数据实现。 具体步骤如下: 读取 JSON 数据 首先需要将 JSON 数据读入到 JavaScript 中,可以使用 XMLHttpRequest 对象读取远程 JSON 文件,也可以直接将 JSO…

    JavaScript 2023年5月27日
    00
  • 详解JavaScript实现JS弹窗的三种方式

    详解JavaScript实现JS弹窗的三种方式 前言 在网页开发中,经常会用到弹窗这个功能。弹窗可以用来展示一些重要信息、提醒用户进行操作,甚至用来进行登录等相关操作。本文将详细介绍 JavaScript 实现三种 JS 弹窗的方式。 方式一:原生 JavaScript 实现 原生 JavaScript 实现弹窗的方式主要使用 window.alert()、…

    JavaScript 2023年5月18日
    00
  • 浅析JavaScript回调函数应用

    浅析JavaScript回调函数应用 什么是回调函数 回调函数是指在一个函数A中调用另一个函数B时,将B作为参数传递给A,并且在A内部执行B的过程就叫做回调函数。 为什么需要回调函数 JavaScript中的函数都是一等公民,可以被当作参数来使用。回调函数在异步编程中非常常见,因为回调函数可以在异步操作完成后被执行,而不会阻塞整个程序的运行。 如何使用回调函…

    JavaScript 2023年5月27日
    00
  • jquery 表单进行客户端验证demo

    以下是详细的攻略: jQuery 表单进行客户端验证 在使用表单提交数据之前,通常需要对表单进行客户端验证,以避免无效的数据被提交到后台服务器。jQuery 是一种非常流行的 JavaScript 库,可以方便地实现表单验证功能。 接下来我们将向您展示如何使用 jQuery 对表单进行客户端验证。以下是大致的步骤: 引入 jQuery JS 库。在 HTML…

    JavaScript 2023年6月10日
    00
  • JavaScript的高级概念和用法详解

    JavaScript的高级概念和用法详解 JavaScript 是一种广泛使用的脚本语言,具有灵活性、动态性和可重用性等优点。而随着前端技术的飞速发展,JavaScript也不断更新迭代,涌现出越来越多的高级概念和用法,本文将对其中几个重要的进行详细讲解。 1. 闭包 闭包是一种特殊的函数,它能够访问并操作函数作用域以外的变量。在 JavaScript 中,…

    JavaScript 2023年5月17日
    00
合作推广
合作推广
分享本页
返回顶部