JS实现Chrome标签悬停提示、切换关闭时按条件触发单次弹窗

一、悬停Chrome标签页触发自定义内容的可行性 #

完全不可行。
Chrome浏览器的标签栏属于浏览器原生UI组件，不属于网页文档的DOM范畴。网页端JavaScript运行在独立的沙箱环境中，没有权限监听浏览器原生UI的交互事件（包括标签页悬停、点击标签等操作），也无法在标签页区域注入自定义渲染内容，所有网页脚本的能力边界被严格限制在当前打开的页面文档范围内。

二、滚动不足57%时关闭/切换标签弹出单次广告的实现 #

你之前代码不生效的核心原因 #

• 事件选错了：window.onbeforeunload事件触发时页面已经进入卸载流程，现代浏览器安全规范明确限制，这个事件里只允许触发浏览器自带的原生离开确认弹窗，完全不支持执行自定义DOM操作（比如弹出你自己写的广告模态框），你写在这个事件里的自定义弹窗逻辑会被浏览器直接拦截。
• 现有滚动逻辑写反：你当前代码是滚动进度≥57%时才弹出模态框，和需求的「滚动不足57%才触发」完全相反。
• 事件绑定冗余：你把模态框的点击关闭逻辑写在了scroll事件回调里，滚动时会重复绑定成百上千次相同的点击事件，浪费性能。
• 缺少单次触发限制：没有做标记位控制，会导致弹窗重复触发。

正确实现方案 #

目前网页端没有能力100%拦截用户关闭/切换标签的操作，行业通用方案是通过退出意图检测覆盖绝大多数用户场景：监听鼠标快速移动到窗口顶部（标签栏所在区域）的行为，配合visibilitychange事件做标签切换、窗口最小化的兜底，同时加标记位保证弹窗只触发1次，页面刷新后标记自动重置。
修正后的完整代码如下：

// 弹窗触发标记：页面生命周期内只弹1次，刷新后自动重置
let hasAdTriggered = false;
// 提前缓存DOM元素，避免重复查询
const adModal = document.querySelector(".modal");
const closeBtn = document.getElementById("close");

// 实时记录当前滚动进度
let currentScrollPercent = 0;
window.addEventListener("scroll", () => {
  const doc = document.documentElement;
  const availableScrollHeight = doc.scrollHeight - doc.clientHeight;
  currentScrollPercent = availableScrollHeight > 0 ? (doc.scrollTop / availableScrollHeight) * 100 : 0;
}, { passive: true });

// 退出意图检测：鼠标移出窗口到顶部标签栏区域时触发
document.addEventListener("mouseout", (e) => {
  if (
    !hasAdTriggered 
    && currentScrollPercent < 57 
    && e.clientY < 5 
    && e.relatedTarget === null
  ) {
    showAdModal();
  }
});

// 兜底：监听标签切换、窗口最小化等页面隐藏场景
document.addEventListener("visibilitychange", () => {
  if (
    !hasAdTriggered 
    && currentScrollPercent < 57 
    && document.visibilityState === "hidden"
  ) {
    showAdModal();
  }
});

// 模态框关闭逻辑，仅绑定1次
closeBtn.addEventListener("click", (e) => {
  e.preventDefault();
  adModal.style.display = "none";
});
window.addEventListener("click", (e) => {
  if (e.target === adModal) {
    adModal.style.display = "none";
  }
});

// 展示广告模态框方法
function showAdModal() {
  if (hasAdTriggered) return;
  hasAdTriggered = true;
  adModal.style.display = "block";
}

提示：受浏览器安全策略限制，不存在可以完全突破浏览器拦截、100%在用户关闭标签时弹自定义模态框的方案，上述逻辑是当前合规范围内能实现的最优方案，覆盖绝大多数普通用户的操作场景。

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