JS发起XML请求校验Cookie后页面持续加载及异常刷新问题求助

问题根因与修复方案 #

1. 注入tnc.html后页面重复加载 #

触发原因：

• 你大概率将checkCookieOnLoad绑定到了window.onload事件上，注入tnc.html后，新插入的DOM携带的图片、样式等外部资源加载完成会再次触发window的load事件，导致函数反复执行、重复拉取tnc.html。
• 小概率是tnc.html内部自带了页面重载逻辑。

修复方法：

• 将函数绑定事件从window.onload替换为DOMContentLoaded，该事件仅在页面初始DOM解析完成后触发一次，不会被后续注入的资源加载触发：

document.addEventListener('DOMContentLoaded', checkCookieOnLoad)

• 也可以新增全局标记位避免重复执行：

let isCookieChecked = false
function checkCookieOnLoad() {
  if (isCookieChecked) return
  isCookieChecked = true
  // 原有逻辑保持不变
}

2. 未勾选复选框点击接受按钮强制刷新 #

触发原因：
你tnc.html里的接受按钮大概率是表单内的type="submit"提交按钮，点击后默认触发表单提交行为导致页面重载。且你的setCookie逻辑只有勾选复选框才会写入cookie，未勾选时cookie没有写入，刷新后页面会再次进入无cookie的校验逻辑，形成循环。

修复方法：

• 给接受按钮的点击事件增加阻止默认行为的逻辑，同时补充未勾选的提示：

// tnc.html内接受按钮的点击处理函数
function handleAccept(e) {
  e.preventDefault() // 阻止默认表单提交/刷新
  const agreeCheckbox = document.getElementById('agree')
  if (!agreeCheckbox.checked) {
    alert('请先勾选同意条款')
    return
  }
  setCookie('clicklink', 'yes', 7) // 按你的需求设置有效期
  checkCookieOnLoad() // 重新执行校验逻辑加载视频
}

• 也可以直接将接受按钮的类型改为普通按钮，从根源避免提交行为：

<button type="button" id="acceptBtn">接受</button>

现有代码优化点 #

• 视频src的.//vid1.mp4多写了一个斜杠，可改为./vid1.mp4避免路径解析异常
• 给video.id = "vdd1"末尾补全分号，符合JS语法规范

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