离线时触发页面切换的关键事件是浏览器原生的offline和online事件，但需结合navigator.onLine初判与fetch探测实现可靠检测，并在页面加载时立即执行双保险逻辑。
离线时触发页面切换的关键事件是什么
浏览器原生支持的 offline 和 online 事件是核心，但它们只在网络连接状态真正变化时触发，且不保证实时——比如 Wi-Fi 断开后可能延迟几百毫秒才触发 offline。更可靠的做法是结合 navigator.onLine 初判 + 定期 fetch 探测（如请求一个轻量 /health 或 favicon.ico），避免误判“假在线”。
友情提示页面的 HTML 结构怎么写才不影响主页面
离线提示页不该覆盖整个视口或破坏原有 DOM，推荐用固定定位的全屏遮罩层，初始隐藏，仅在网络异常时显示：
<div id="offline-banner" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; flex-direction: column; justify-content: center; align-items: center;"> <h2>网络连接已断开</h2> <p>请检查网络后刷新页面</p> <button onclick="location.reload()">重试</button> </div>
注意：不要用 document.write 或替换 document.body.innerHTML，那会销毁所有 JS 状态和事件监听器。
如何让提示页在页面加载前就生效
如果用户打开网页时已是离线状态，offline 事件不会触发（因为没“变化”），必须在 <head> 中尽早执行检测逻辑：
立即学习“前端免费学习笔记（深入）”；
- 把检测逻辑放在
<script>标签中，且置于<body>开始前 - 用
navigator.onLine === false直接判断，立即显示遮罩 - 再加一个 1 秒后的
fetch二次验证，防止某些浏览器navigator.onLine返回错误值
示例关键逻辑：
<script>
if (!navigator.onLine) {
document.getElementById('offline-banner').style.display = 'flex';
} else {
fetch('/favicon.ico', { cache: 'no-cache' }).catch(() => {
document.getElementById('offline-banner').style.display = 'flex';
});
}
</script>
移动端 Safari 和旧版 Chrome 的兼容性坑
navigator.onLine 在 iOS Safari 上长期存在 bug：飞行模式下返回 true；部分 Android WebView 也返回恒定 true。因此不能只依赖它：
- 务必搭配 fetch 探测，路径选服务器上真实存在的静态资源（避免 404 被缓存）
- 探测请求加
cache: 'no-cache'和随机 query（如?t=+Date.now()）防缓存干扰 - 超时设为 3000ms，太短易误判，太长影响体验
- 不要监听
window.addEventListener('offline')就完事——它不解决首次加载离线的问题
真正起作用的是“加载时检测 + 变化时监听”双保险，而且后者要绑定在 window 上，不是 document。
