Cookie校验后XHR页面持续重载、条款同意提交也触发重载排查求助

1. TnC内容重复加载问题 #

• checkCookieOnLoad函数未加请求状态标记，当该函数被重复触发时（例如绑定了DOM变更监听、定时器、页面初始化回调被多次执行），只要未检测到指定Cookie就会重复发起tnc.html请求
• 插入TnC内容的DOM操作如果触发了页面上其他的监听逻辑，会导致checkCookieOnLoad二次执行，形成循环请求

2. 点击同意按钮页面重载问题 #

• TnC的同意按钮默认绑定了表单提交行为，未阻止默认事件时点击会触发页面刷新
• Cookie设置完成后未主动触发状态更新，页面重新执行初始化逻辑时也会触发重载

第一步：新增加载标记避免重复XHR请求 #

给checkCookieOnLoad函数添加加载状态标记，防止重复发起请求：

// 全局标记，记录TnC是否已加载
let tncLoaded = false;
function checkCookieOnLoad() {
  if(getCookie("clicklink") === "yes") {
    var elem = document.getElementById("tmx");
    elem.parentNode.removeChild(elem);
    var video = document.createElement('video');
    video.type = "video/mp4";
    video.src = ".//vid1.mp4";
    video.autoplay = true;
    video.muted = true;
    video.id = "vdd1"
    document.body.appendChild(video);
    video.addEventListener("timeupdate", function(){
      if(this.currentTime >= 4.8) {
        this.pause();
        this.remove();
        location.replace("https://test.com");
      }
    });
    return true;
  } else {
    // 仅未加载过TnC时发起请求
    if(!tncLoaded) {
      const xhr = new XMLHttpRequest();
      const container = document.getElementById('tmx');
      xhr.onload = function() {
        if (this.status ===200){
          container.innerHTML = xhr.responseText;
          tncLoaded = true;
          // TnC加载完成后绑定同意按钮事件
          bindAgreeEvent();
        }
      }
      xhr.open('get', 'tnc.html');
      xhr.send();
    }
  }
}

第二步：阻止表单默认提交行为 #

新增同意按钮绑定逻辑，阻止点击后的默认刷新行为：

function bindAgreeEvent() {
  const agreeBtn = document.getElementById('agree');
  agreeBtn.addEventListener('click', function(e) {
    // 阻止表单默认提交刷新页面
    e.preventDefault();
    // 写入同意Cookie，30为有效期天数可按需修改
    setCookie('clicklink', 'yes', 30);
    // 重新执行Cookie检查，跳转正常业务逻辑
    checkCookieOnLoad();
  })
}

第三步：优化Cookie函数边界处理 #

避免DOM元素不存在时抛出异常：

function setCookie(cname, cvalue, exdays) {
  const agreeElem = document.getElementById('agree');
  if(agreeElem && agreeElem.checked){
    const d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    let expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }   
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1);
    if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
  }
  return "";
}

内容的提问来源于stack exchange，提问作者HtmlN00b