- A+
所属分类：Web前端
背景：
本来项目开发系统防挂机功能，在其余游览器中均可以使用。但是呢在苹果的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"; }
结语：
其实就是按照墓碑机制进行仿照开发，此文章进行记录以后可以在其他平台进行此机制的开发；
