beforeunload事件不能用于广告挽留，因其仅支持返回非空字符串触发统一提示文案，禁止自定义内容、DOM操作及异步调用，且须用户交互后注册，否则被静默拦截。
离开页面前弹窗挽留广告，本质是误用 beforeunload 事件——它不支持广告类弹窗，也不能自定义内容，强行套用只会失效或被浏览器静默拦截。
为什么 beforeunload 不能用来做广告挽留
beforeunload 的设计目的只有一个：提示用户“当前有未保存的更改”，不是为了推广、转化或广告曝光。它的行为受严格限制：
- 返回的字符串（如
return '请别走！'）在 Chrome 88+、Firefox 97+、Edge 105+ 中完全不显示，只出现统一文案：“此页面正在询问您是否要离开……” - 必须在用户发生真实交互（
click、keydown等）后才注册监听，否则 Chrome 直接忽略——页面一加载就绑，基本不弹 - 禁止调用
alert()、confirm()、document.querySelector().showModal()等任何 DOM 操作，否则控制台报错：Blocked attempt to show a 'beforeunload' confirmation panel - 移动端 Safari 几乎不触发该事件，iOS 上基本无效
广告挽留该用什么替代方案
真正可行的路径，是把“挽留”动作绑定到用户明确意图离开前的**最后一个可预测交互点**上，比如：
- 用户鼠标移出窗口顶部区域（
mouseleave+event.clientY ），且停留时间 > 500ms（防误触） - 用户滚动到页面底部并停顿 2 秒，再点击返回按钮或地址栏
- 用户在表单填写后未提交，鼠标长时间悬停在关闭标签页按钮上方（需结合
visibilitychange+ 定时器判断） - 在 SPA 中，监听路由守卫（如 Vue Router 的
beforeEach或 React Router 的useBlocker），仅当目标是外链或刷新时才触发自定义弹窗
这些方案都依赖真实用户行为信号，而非浏览器强制拦截，因此能正常展示带样式、按钮、倒计时的广告弹窗。
如何避免被浏览器拦截广告弹窗
所有非用户手势触发的弹窗（包括 setTimeout 延时、fetch 回调、scroll 到某位置自动弹）都会被现代浏览器拦截，控制台报错：Blocked opening 'xxx' in a new window because the request was made without user activation.
- 首次弹窗必须由
click、touchend、submit等可信事件直接触发，中间不能隔异步操作 - 不要用
window.open()，它在广告场景下已基本不可用 - 如果要用
，必须确保调用dialogEl.showModal()是在事件处理函数同步路径中，不能包在Promise.then()或setTimeout里 - 记录用户是否已看过该弹窗（用
localStorage），设置最小冷却时间（如 24 小时），否则重复弹出会加剧用户反感和屏蔽率
真正的难点不在“怎么弹”，而在“什么时候弹得合理又不被拦”。浏览器对用户注意力的保护越来越强，硬扛规则只会让广告更难触达——把弹窗逻辑从“离开前阻断”转向“离开前一刻自然浮现”，才是当前最稳定的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
