可使用 navigator.userAgent 检测低版本 IE（MSIE/Trident）及 Chrome（<80）、Firefox（<78）、Safari（<14），结合 Promise/fetch/classList 等 API 兜底，动态插入带关闭按钮和 localStorage 持久化的顶部提示条。
可以用 BOM（Browser Object Model）中的 navigator.userAgent 或更现代的 navigator.userAgentData（需配合特性检测）来识别浏览器类型和版本，再结合简单 DOM 操作插入提示条。核心思路是：判断是否为低版本 IE 或旧版 Chrome/Firefox/Safari，满足条件则在页面顶部插入一条醒目的提示信息，并提供关闭按钮和升级引导。
检测低版本浏览器（兼容主流方案）
由于 navigator.userAgentData 兼容性有限（Chrome 101+、Edge 101+，Firefox/ Safari 尚未支持），目前仍推荐用 userAgent 字符串解析 + 特性兜底的方式：
- 优先检测 IE（
MSIE或Trident）：IE10 及以下视为过时 - 对 Chrome/Firefox/Safari 做版本截断（如 Chrome < 80、Firefox < 78、Safari < 14）
- 补充关键 API 检测（如
Promise、fetch、classList），避免误判伪装 UA 的情况
动态插入提示条 DOM 元素
创建一个固定定位的 <div>，包含文字、关闭按钮和可选的升级链接。注意添加内联样式确保立即生效，不依赖外部 CSS：
const bar = document.createElement('div');
bar.id = 'browser-warning-bar';
bar.innerHTML = `
⚠️ 您的浏览器版本过低，部分功能可能无法正常使用。建议升级到最新版 Chrome、Firefox、Edge 或 Safari。
<button id="close-browser-bar" style="margin-left: 12px; padding: 2px 8px; font-size: 12px; background: #e0e0e0; border: none; border-radius: 3px; cursor: pointer;">×</button>
`;
bar.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff3cd;
color: #856404;
text-align: center;
padding: 8px 0;
font-size: 14px;
z-index: 9999;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
`;
document.body.insertBefore(bar, document.body.firstChild);
绑定关闭与持久化逻辑
点击 × 按钮隐藏提示条，并通过 localStorage 记录用户选择，避免重复打扰：
立即学习“Java免费学习笔记（深入）”；
- 给关闭按钮添加
click事件，调用bar.remove() - 同时设置
localStorage.setItem('browserWarningClosed', 'true') - 初始化时先检查
localStorage和 UA 条件，仅当未关闭且命中低版本才显示
推荐的最小可用实现（直接粘贴到 <head> 或 <body> 底部）
以下代码已兼顾兼容性、轻量和可维护性：
(function() {
const closed = localStorage.getItem('browserWarningClosed') === 'true';
if (closed) return;
function isOutdated() {
const ua = navigator.userAgent;
// IE 10 及以下
if (ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1) return true;
// Chrome < 80
const chromeMatch = ua.match(/Chrome\/(\d+)/);
if (chromeMatch && parseInt(chromeMatch[1]) < 80) return true;
// Firefox < 78
const firefoxMatch = ua.match(/Firefox\/(\d+)/);
if (firefoxMatch && parseInt(firefoxMatch[1]) < 78) return true;
// Safari < 14
const safariMatch = ua.match(/Version\/(\d+).+Safari/);
if (safariMatch && parseInt(safariMatch[1]) < 14) return true;
return false;
}
if (!isOutdated()) return;
const bar = document.createElement('div');
bar.id = 'browser-warning-bar';
bar.innerHTML = '⚠️ 您的浏览器版本过低，部分功能可能无法正常使用。建议升级到最新版 Chrome、Firefox、Edge 或 Safari。' +
'<button id="close-browser-bar" style="margin-left:12px;padding:2px 8px;font-size:12px;background:#e0e0e0;border:none;border-radius:3px;cursor:pointer;">×</button>';
bar.style.cssText = 'position:fixed;top:0;left:0;width:100%;background:#fff3cd;color:#856404;text-align:center;padding:8px 0;font-size:14px;z-index:9999;box-shadow:0 2px 4px rgba(0,0,0,0.1);';
const closeBtn = bar.querySelector('#close-browser-bar');
closeBtn.addEventListener('click', () => {
bar.remove();
localStorage.setItem('browserWarningClosed', 'true');
});
document.body.insertBefore(bar, document.body.firstChild);
})();
