页面加载完成后执行JS函数遇阻：CookieBot致监听失效如何解决？

看来你遇到的麻烦是CookieBot脚本加载失败（404错误）后，常规的页面加载事件监听全被干扰了，导致加载动画一直停着关不掉。我整理了几个靠谱的解决思路，帮你把页面完成后的函数正常跑起来：

方案1：直接监听CookieBot脚本的加载错误 #

既然问题根源是CookieBot加载失败，那我们可以给它的脚本标签加个错误监听，一旦加载失败就手动触发后续逻辑：

// 先找到页面里的CookieBot脚本标签
const cookieBotScript = document.querySelector('script[src*="cookiebot.com"]');
if (cookieBotScript) {
  cookieBotScript.addEventListener('error', () => {
    console.log('CookieBot加载失败，执行页面完成逻辑');
    // 这里替换成你的实际操作，比如隐藏加载动画
    hideLoadingAnimation();
  });
}

如果是动态创建的CookieBot脚本，就在创建时绑定错误事件：

const script = document.createElement('script');
script.src = '你的CookieBot脚本地址';
script.addEventListener('error', () => hideLoadingAnimation());
document.head.appendChild(script);

方案2：轮询document.readyState检查页面状态 #

绕过被干扰的事件监听，直接轮询页面的就绪状态，直到页面加载完成：

function checkPageReady() {
  if (document.readyState === 'complete') {
    console.log('页面已完全加载');
    hideLoadingAnimation();
  } else {
    // 每100毫秒检查一次，可根据需求调整间隔
    setTimeout(checkPageReady, 100);
  }
}

// 页面一开始就启动轮询
checkPageReady();

document.readyState有三个状态：loading（页面正在加载）、interactive（DOM解析完成，资源还在加载）、complete（所有资源加载完毕），如果不需要等图片、样式表，用interactive也可以。

方案3：用MutationObserver监测DOM变化 #

如果你的加载动画和某个特定元素绑定，或者需要监听DOM是否就绪，可以用MutationObserver来检测关键内容的加载情况：

const targetNode = document.body;
const observerOptions = {
  childList: true,
  subtree: true
};

const observer = new MutationObserver((mutations) => {
  // 检查关键元素是否存在，同时判断DOM是否就绪
  const mainContent = document.querySelector('#main-content');
  if (mainContent && document.readyState === 'interactive') {
    console.log('DOM已就绪，执行清理逻辑');
    hideLoadingAnimation();
    observer.disconnect(); // 完成后停止监听
  }
});

observer.observe(targetNode, observerOptions);

这种方式完全避开了事件被覆盖的问题，直接通过观察DOM变化来判断页面状态。

方案4：使用事件捕获模式绑定监听 #

如果CookieBot确实覆盖了冒泡阶段的事件监听，试试用捕获模式绑定你的监听（捕获模式会在冒泡模式之前触发）：

window.addEventListener('load', () => {
  console.log('window load触发（捕获模式）');
  hideLoadingAnimation();
}, true); // 第三个参数设为true开启捕获模式

捕获模式的监听不容易被脚本对冒泡事件的覆盖影响。

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