学习：JavaScript(8)
Navigator对象：获取浏览器信息
在 JavaScript 中， Navigator 对象 提供了关于浏览器和操作系统的详细信息。以下是 Navigator 对象的完整指南，涵盖属性、方法和实际应用。
1. Navigator 对象的基本特性
(1) 获取 Navigator 对象
const navigator = window.navigator;
console.log(navigator);
(2) Navigator 对象的属性
| 属性 | 说明 | 示例 |
|---|---|---|
userAgent | 用户代理字符串 | navigator.userAgent |
platform | 操作系统平台 | navigator.platform |
language | 浏览器语言 | navigator.language |
cookieEnabled | 是否启用 Cookie | navigator.cookieEnabled |
onLine | 是否在线 | navigator.onLine |
hardwareConcurrency | CPU 核心数 | navigator.hardwareConcurrency |
deviceMemory | 设备内存（GB） | navigator.deviceMemory |
2. 获取浏览器信息
(1) 用户代理字符串
console.log(navigator.userAgent);
// 示例输出: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"
(2) 浏览器名称和版本
function getBrowserInfo() {const ua = navigator.userAgent;let browserName, browserVersion;if (ua.includes("Chrome")) {browserName = "Chrome";browserVersion = ua.match(/Chrome\/(\d+\.\d+)/)[1];} else if (ua.includes("Firefox")) {browserName = "Firefox";browserVersion = ua.match(/Firefox\/(\d+\.\d+)/)[1];} else if (ua.includes("Safari")) {browserName = "Safari";browserVersion = ua.match(/Version\/(\d+\.\d+)/)[1];} else if (ua.includes("Edge")) {browserName = "Edge";browserVersion = ua.match(/Edge\/(\d+\.\d+)/)[1];} else if (ua.includes("Opera")) {browserName = "Opera";browserVersion = ua.match(/Opera\/(\d+\.\d+)/)[1];} else {browserName = "Unknown";browserVersion = "Unknown";}return { browserName, browserVersion };
}console.log(getBrowserInfo());
(3) 操作系统信息
function getOSInfo() {const ua = navigator.userAgent;let osName;if (ua.includes("Windows")) {osName = "Windows";} else if (ua.includes("Mac")) {osName = "MacOS";} else if (ua.includes("Linux")) {osName = "Linux";} else if (ua.includes("Android")) {osName = "Android";} else if (ua.includes("iOS")) {osName = "iOS";} else {osName = "Unknown";}return { osName, platform: navigator.platform };
}console.log(getOSInfo());
3. 功能检测
(1) 检测浏览器功能
function checkBrowserFeatures() {return {geolocation: "geolocation" in navigator,camera: "mediaDevices" in navigator && "getUserMedia" in navigator.mediaDevices,localStorage: "localStorage" in window,serviceWorker: "serviceWorker" in navigator,webGL: "WebGLRenderingContext" in window};
}console.log(checkBrowserFeatures());
(2) 检测网络状态
console.log("当前网络状态:", navigator.onLine ? "在线" : "离线");window.addEventListener("online", () => {console.log("网络已连接");
});window.addEventListener("offline", () => {console.log("网络已断开");
});
(3) 检测电池状态
if ("getBattery" in navigator) {navigator.getBattery().then(battery => {console.log(`电量: ${battery.level * 100}%`);console.log(`是否在充电: ${battery.charging}`);battery.addEventListener("levelchange", () => {console.log(`电量变化: ${battery.level * 100}%`);});battery.addEventListener("chargingchange", () => {console.log(`充电状态变化: ${battery.charging}`);});});
} else {console.log("浏览器不支持电池状态 API");
}
4. 实际应用示例
(1) 浏览器兼容性检查
// 检查浏览器功能的函数
function checkBrowserFeatures() {return {// 检查是否支持本地存储localStorage: !!window.localStorage,// 检查是否支持sessionStoragesessionStorage: !!window.sessionStorage,// 检查是否支持地理位置geolocation: !!navigator.geolocation,// 检查是否支持Web WorkerswebWorkers: !!window.Worker,// 检查是否支持Fetch APIfetch: !!window.fetch,// 检查是否支持Promisepromise: !!window.Promise,// 检查是否支持Service WorkerserviceWorker: !!navigator.serviceWorker,// 检查是否支持WebRTCwebRTC: !!(window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection),// 检查是否支持Canvascanvas: !!document.createElement('canvas').getContext,// 检查是否支持SVGsvg: !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect};
}
function checkCompatibility() {const features = checkBrowserFeatures();const unsupported = Object.entries(features).filter(([_, supported]) => !supported).map(([name]) => name);if (unsupported.length > 0) {console.warn("不支持的浏览器功能:", unsupported.join(", "));alert(`您的浏览器不支持以下功能: ${unsupported.join(", ")}`);} else {console.log("所有功能均支持");}
}checkCompatibility();
(2) 设备信息收集
<script>
// 获取浏览器信息
function getBrowserInfo() {const ua = navigator.userAgent;let browserName = "Unknown";let browserVersion = "Unknown";if (ua.indexOf("Firefox") > -1) {browserName = "Mozilla Firefox";browserVersion = ua.match(/Firefox\/(\d+)/)?.[1] || "Unknown";} else if (ua.indexOf("Chrome") > -1) {browserName = "Google Chrome";browserVersion = ua.match(/Chrome\/(\d+)/)?.[1] || "Unknown";} else if (ua.indexOf("Safari") > -1) {browserName = "Safari";browserVersion = ua.match(/Version\/(\d+)/)?.[1] || "Unknown";} else if (ua.indexOf("Edge") > -1) {browserName = "Microsoft Edge";browserVersion = ua.match(/Edge\/(\d+)/)?.[1] || "Unknown";}return {name: browserName,version: browserVersion,userAgent: ua};
}// 获取操作系统信息
function getOSInfo() {const ua = navigator.userAgent;let osName = "Unknown";let osVersion = "Unknown";if (ua.indexOf("Windows NT 10.0") > -1) {osName = "Windows";osVersion = "10";} else if (ua.indexOf("Windows NT 6.3") > -1) {osName = "Windows";osVersion = "8.1";} else if (ua.indexOf("Windows NT 6.2") > -1) {osName = "Windows";osVersion = "8";} else if (ua.indexOf("Windows NT 6.1") > -1) {osName = "Windows";osVersion = "7";} else if (ua.indexOf("Mac OS X") > -1) {osName = "macOS";osVersion = ua.match(/Mac OS X ([0-9_]+)/)?.[1]?.replace(/_/g, ".") || "Unknown";} else if (ua.indexOf("Linux") > -1) {osName = "Linux";} else if (ua.indexOf("Android") > -1) {osName = "Android";osVersion = ua.match(/Android ([0-9.]+)/)?.[1] || "Unknown";} else if (ua.indexOf("iOS") > -1) {osName = "iOS";osVersion = ua.match(/OS ([0-9_]+)/)?.[1]?.replace(/_/g, ".") || "Unknown";}return {name: osName,version: osVersion};
}function collectDeviceInfo() {return {browser: getBrowserInfo(),os: getOSInfo(),screen: {width: screen.width,height: screen.height,colorDepth: screen.colorDepth,},cpuCores: navigator.hardwareConcurrency,deviceMemory: navigator.deviceMemory,online: navigator.onLine,};
}console.log(collectDeviceInfo());
</script>
(3) 地理位置获取
function getLocation() {if ("geolocation" in navigator) {navigator.geolocation.getCurrentPosition(position => {console.log("纬度:", position.coords.latitude);console.log("经度:", position.coords.longitude);},error => {console.error("获取位置失败:", error.message);},{ enableHighAccuracy: true, timeout: 5000 });} else {console.log("浏览器不支持地理位置");}
}getLocation();
(4) 摄像头和麦克风访问
function requestCameraAccess() {if ("mediaDevices" in navigator && "getUserMedia" in navigator.mediaDevices) {navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {console.log("摄像头和麦克风已启用");// 显示视频流const video = document.createElement("video");video.srcObject = stream;document.body.appendChild(video);video.play();}).catch(error => {console.error("访问设备失败:", error);});} else {console.log("浏览器不支持媒体设备");}
}requestCameraAccess();
摄像头和麦克风已启用
(5) 浏览器指纹生成
function generateBrowserFingerprint() {const canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");ctx.fillText("Browser Fingerprint", 10, 10);const fingerprint = canvas.toDataURL();return {fingerprint,userAgent: navigator.userAgent,platform: navigator.platform,language: navigator.language,hardwareConcurrency: navigator.hardwareConcurrency,deviceMemory: navigator.deviceMemory};
}console.log(generateBrowserFingerprint());
(6) Service Worker 注册
if ("serviceWorker" in navigator) {window.addEventListener("load", () => {navigator.serviceWorker.register("/sw.js").then(registration => {console.log("ServiceWorker 注册成功:", registration.scope);}).catch(error => {console.error("ServiceWorker 注册失败:", error);});});
}
(7) WebGL 支持检测
function checkWebGLSupport() {try {const canvas = document.createElement("canvas");return !!(window.WebGLRenderingContext &&(canvas.getContext("webgl") || canvas.getContext("experimental-webgl")));} catch (e) {return false;}
}console.log("WebGL 支持:", checkWebGLSupport() ? "是" : "否");
(8) 浏览器语言偏好
function getPreferredLanguages() {return navigator.languages || [navigator.language];
}console.log("用户偏好语言:", getPreferredLanguages());
(9) 设备类型检测
function detectDeviceType() {const ua = navigator.userAgent;if (ua.includes("Mobi") || ua.includes("Android") || ua.includes("iPhone")) {return "Mobile";} else if (ua.includes("Tablet") || ua.includes("iPad")) {return "Tablet";} else {return "Desktop";}
}console.log("设备类型:", detectDeviceType());
(10) 浏览器插件检测
function checkPlugins() {return Array.from(navigator.plugins).map(plugin => ({name: plugin.name,description: plugin.description,filename: plugin.filename}));
}console.log("浏览器插件:", checkPlugins());
5. 兼容性和最佳实践
(1) 特征检测优先
// 优先使用特征检测而非 userAgent
if ("geolocation" in navigator) {// 使用地理位置 API
} else {console.log("浏览器不支持地理位置");
}
(2) 隐私保护
// 避免收集敏感信息
function getBasicDeviceInfo() {return {browser: getBrowserInfo().browserName,os: getOSInfo().osName,screenWidth: screen.width,online: navigator.onLine};
}
(3) 性能优化
// 延迟加载非关键功能
if ("IntersectionObserver" in window) {const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {// 加载功能observer.unobserve(entry.target);}});});observer.observe(document.getElementById("lazy-load"));
}
Screen对象：获取屏幕信息
在 JavaScript 中， Screen 对象 提供了关于用户屏幕的详细信息。以下是 Screen 对象的完整指南，涵盖属性、方法和实际应用。
1. Screen 对象的基本特性
(1) 获取 Screen 对象
const screen = window.screen;
console.log(screen);
(2) Screen 对象的属性
| 属性 | 说明 | 示例 |
|---|---|---|
width | 屏幕宽度（像素） | screen.width |
height | 屏幕高度（像素） | screen.height |
availWidth | 可用宽度（减去任务栏等） | screen.availWidth |
availHeight | 可用高度（减去任务栏等） | screen.availHeight |
colorDepth | 色彩深度（位数） | screen.colorDepth |
pixelDepth | 像素深度（通常与 colorDepth 相同） | screen.pixelDepth |
orientation | 屏幕方向（如 portrait 或 landscape ） | screen.orientation |
2. 获取屏幕信息
(1) 基本屏幕信息
function getScreenInfo() {return {resolution: `${screen.width} × ${screen.height}`,availableArea: `${screen.availWidth} × ${screen.availHeight}`,colorDepth: `${screen.colorDepth} 位`,pixelDepth: `${screen.pixelDepth} 位`};
}console.log(getScreenInfo());
(2) 屏幕方向检测
function checkScreenOrientation() {if ("orientation" in screen) {return {type: screen.orientation.type,angle: screen.orientation.angle};} else {return "浏览器不支持屏幕方向 API";}
}console.log(checkScreenOrientation());// 监听屏幕方向变化
if ("orientation" in screen) {screen.orientation.addEventListener("change", () => {console.log("屏幕方向变化:", screen.orientation.type);});
}
3. 实际应用示例
(1) 响应式布局适配
function adaptLayout() {const screenWidth = screen.width;if (screenWidth < 768) {console.log("移动设备布局");} else if (screenWidth < 1024) {console.log("平板设备布局");} else {console.log("桌面设备布局");}
}window.addEventListener("resize", adaptLayout);
adaptLayout(); // 初始适配
(2) 全屏模式检测
function checkFullscreen() {return {isFullscreen: !!document.fullscreenElement,screenSize: `${screen.width} × ${screen.height}`};
}console.log(checkFullscreen());// 监听全屏变化
document.addEventListener("fullscreenchange", () => {console.log("全屏状态变化:", !!document.fullscreenElement);
});
(3) 高分辨率设备检测
function isHighDPI() {return window.devicePixelRatio > 1;
}console.log("是否高分辨率设备:", isHighDPI() ? "是" : "否");
(4) 屏幕旋转处理
function handleOrientationChange() {if (!("orientation" in screen)) return;const orientation = screen.orientation.type;if (orientation.includes("portrait")) {console.log("竖屏模式");} else if (orientation.includes("landscape")) {console.log("横屏模式");}
}if ("orientation" in screen) {screen.orientation.addEventListener("change", handleOrientationChange);handleOrientationChange(); // 初始检测
}
(5) 多显示器支持检测
function checkMultiDisplaySupport() {return {isMultiDisplay: window.screenLeft !== window.screenX,screenX: window.screenX,screenY: window.screenY};
}console.log("多显示器支持:", checkMultiDisplaySupport());
(6) 屏幕尺寸分类
function classifyScreenSize() {const diagonal = Math.sqrt(screen.width ** 2 + screen.height ** 2) / 96; // 转换为英寸if (diagonal < 10) return "小型设备（手机）";if (diagonal < 15) return "中型设备（平板）";return "大型设备（桌面）";
}console.log("屏幕尺寸分类:", classifyScreenSize());
(7) 暗黑模式检测
function checkDarkMode() {return window.matchMedia("(prefers-color-scheme: dark)").matches;
}console.log("暗黑模式:", checkDarkMode() ? "已启用" : "未启用");
(8) 屏幕节能模式检测
function checkPowerSaveMode() {return "matchMedia" in window && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}console.log("节能模式:", checkPowerSaveMode() ? "已启用" : "未启用");
(9) 屏幕刷新率检测
function getScreenRefreshRate() {return new Promise(resolve => {let frames = 0;const start = performance.now();function countFrame() {frames++;if (performance.now() - start >= 1000) {resolve(frames);} else {requestAnimationFrame(countFrame);}}requestAnimationFrame(countFrame);});
}getScreenRefreshRate().then(rate => {console.log("屏幕刷新率:", rate, "Hz");
});
(10) 屏幕截图辅助
function setupScreenshotHelper() {const overlay = document.createElement("div");overlay.style.cssText = `position: fixed;top: 0;left: 0;width: ${screen.width}px;height: ${screen.height}px;background: rgba(0, 0, 0, 0.5);z-index: 9999;display: none;`;document.body.appendChild(overlay);return {highlightArea(x, y, width, height) {overlay.style.display = "block";overlay.style.clipPath = `polygon(0 0, 100% 0, 100% 100%, 0 100%,0 0,${x}px ${y}px,${x + width}px ${y}px,${x + width}px ${y + height}px,${x}px ${y + height}px,${x}px ${y}px)`;},reset() {overlay.style.display = "none";}};
}// 使用示例
const screenshotHelper = setupScreenshotHelper();
screenshotHelper.highlightArea(100, 100, 300, 200);
setTimeout(() => screenshotHelper.reset(), 2000);
4. 兼容性和最佳实践
(1) 特征检测
function isScreenAPISupported() {return ("screen" in window &&"width" in screen &&"height" in screen &&"availWidth" in screen &&"availHeight" in screen);
}console.log("Screen API 支持:", isScreenAPISupported() ? "是" : "否");
(2) 隐私保护
function getSafeScreenInfo() {return {// 避免精确值widthCategory: screen.width < 768 ? "small" : screen.width < 1024 ? "medium" : "large",colorDepth: screen.colorDepth > 24 ? "high" : "standard",isHighDPI: window.devicePixelRatio > 1 ? "yes" : "no"};
}console.log("安全屏幕信息:", getSafeScreenInfo());
(3) 性能优化
// 防抖处理屏幕尺寸变化
let resizeTimeout;
window.addEventListener("resize", () => {clearTimeout(resizeTimeout);resizeTimeout = setTimeout(() => {console.log("屏幕尺寸稳定:", window.innerWidth, window.innerHeight);}, 300);
});
Location对象：获取URL
在 JavaScript 中， Location 对象 提供了当前页面的 URL 信息，并允许修改和操作 URL。以下是 Location 对象的完整指南，涵盖属性、方法和实际应用。
1. Location 对象的基本特性
(1) 获取 Location 对象
<script>console.log(location);// 或者console.log(window.location);
</script>
(2) Location 对象的属性
| 属性 | 说明 | 示例 |
|---|---|---|
href | 完整 URL | location.href |
protocol | 协议（ http: 或 https: ） | location.protocol |
host | 主机名和端口 | location.host |
hostname | 主机名 | location.hostname |
port | 端口号 | location.port |
pathname | 路径部分 | location.pathname |
search | 查询字符串（ ? 后的内容） | location.search |
hash | 哈希值（ # 后的内容） | location.hash |
origin | 源（协议 + 主机名 + 端口） | location.origin |
2. 获取 URL 信息
(1) 解析当前 URL
function parseCurrentURL() {return {fullURL: location.href,protocol: location.protocol,host: location.host,path: location.pathname,query: location.search,hash: location.hash};
}console.log(parseCurrentURL());
(2) 解析查询字符串
function parseQueryString() {const query = {};const searchParams = new URLSearchParams(location.search);for (const [key, value] of searchParams.entries()) {query[key] = value;}return query;
}console.log(parseQueryString());
(3) 获取哈希值内容
<div id="hashDisplay">当前哈希: 无</div><div><a href="#home">首页</a><a href="#about">关于</a><a href="#contact">联系</a></div><div id="content"></div><script>function getHashContent() {return location.hash.slice(1); // 去掉开头的 #}function updateContent() {const hash = getHashContent();document.getElementById("hashDisplay").textContent ="当前哈希: " + hash;document.getElementById("content").innerHTML = "<h2>" + hash + "</h2>";}window.addEventListener("hashchange", updateContent);updateContent();</script>
3. 操作 URL
(1) 修改 URL 的哈希值
function setHash(newHash) {location.hash = newHash;
}setHash("section2");
(2) 修改查询字符串
function updateQueryParam(key, value) {const searchParams = new URLSearchParams(location.search);searchParams.set(key, value);location.search = searchParams.toString();
}updateQueryParam("page", "2");
(3) 添加查询参数
function addQueryParam(key, value) {const searchParams = new URLSearchParams(location.search);if (!searchParams.has(key)) {searchParams.append(key, value);location.search = searchParams.toString();}
}addQueryParam("sort", "asc");
(4) 删除查询参数
function removeQueryParam(key) {const searchParams = new URLSearchParams(location.search);if (searchParams.has(key)) {searchParams.delete(key);location.search = searchParams.toString();}
}removeQueryParam("page");
(5) 跳转到新页面
function navigateTo(url) {location.href = url;
}navigateTo("https://example.com");
(6) 重定向页面（不保留历史记录）
function redirectTo(url) {location.replace(url);
}redirectTo("https://example.com/new-page");
(7) 重新加载页面
function reloadPage(force = false) {if (force) {location.reload(true); // 强制从服务器加载} else {location.reload(); // 可能从缓存加载}
}reloadPage();
4. 实际应用示例
(1) 动态修改页面内容基于哈希值
function setupHashRouter() {function handleHashChange() {const sectionId = location.hash.slice(1);const section = document.getElementById(sectionId);if (section) {document.querySelectorAll(".content-section").forEach(s => {s.style.display = "none";});section.style.display = "block";}}window.addEventListener("hashchange", handleHashChange);handleHashChange(); // 初始加载
}setupHashRouter();
(2) 表单提交后保留查询参数
function handleFormSubmit(event) {event.preventDefault();const formData = new FormData(event.target);const searchParams = new URLSearchParams(location.search);for (const [key, value] of formData.entries()) {searchParams.set(key, value);}location.search = searchParams.toString();
}document.getElementById("search-form").addEventListener("submit", handleFormSubmit);
(3) 分页导航
function goToPage(pageNumber) {const searchParams = new URLSearchParams(location.search);searchParams.set("page", pageNumber);location.search = searchParams.toString();
}goToPage(3);
(4) URL 参数验证
function validateURLParams() {const searchParams = new URLSearchParams(location.search);const requiredParams = ["id", "token"];const missingParams = [];for (const param of requiredParams) {if (!searchParams.has(param)) {missingParams.push(param);}}if (missingParams.length > 0) {console.error("缺少必要参数:", missingParams.join(", "));return false;}return true;
}if (!validateURLParams()) {redirectTo("/error?code=missing_params");
}
(5) 构建绝对 URL
function buildAbsoluteURL(path, queryParams = {}) {const url = new URL(path, location.origin);for (const [key, value] of Object.entries(queryParams)) {url.searchParams.set(key, value);}return url.href;
}const newURL = buildAbsoluteURL("/products", { category: "electronics", page: 1 });
console.log("构建的 URL:", newURL);
(6) 解析 URL 路径
function parseURLPath() {const pathSegments = location.pathname.split("/").filter(Boolean);return {segments: pathSegments,lastSegment: pathSegments[pathSegments.length - 1] || null};
}console.log(parseURLPath());
(7) 监听 URL 变化
function setupURLChangeListener() {let currentURL = location.href;setInterval(() => {if (location.href !== currentURL) {console.log("URL 已变化:", location.href);currentURL = location.href;}}, 1000);
}setupURLChangeListener();
(8) URL 编码与解码
function encodeURLComponent(str) {return encodeURIComponent(str).replace(/%20/g, "+");
}function decodeURLComponent(str) {return decodeURIComponent(str.replace(/\+/g, " "));
}const encoded = encodeURLComponent("Hello World!");
console.log("编码后:", encoded);
console.log("解码后:", decodeURLComponent(encoded));
(9) 比较两个 URL
function compareURLs(url1, url2) {const u1 = new URL(url1);const u2 = new URL(url2);return {sameOrigin: u1.origin === u2.origin,samePath: u1.pathname === u2.pathname,sameQuery: u1.search === u2.search,sameHash: u1.hash === u2.hash};
}console.log(compareURLs("https://example.com/page?q=1#section","https://example.com/page?q=2"
));
(10) URL 参数合并
function mergeQueryParams(newParams) {const searchParams = new URLSearchParams(location.search);for (const [key, value] of Object.entries(newParams)) {searchParams.set(key, value);}return searchParams.toString();
}const mergedQuery = mergeQueryParams({ page: 2, sort: "desc" });
console.log("合并后的查询字符串:", mergedQuery);
5. 兼容性和最佳实践
(1) 特征检测
function isLocationAPISupported() {return "location" in window && "href" in location;
}console.log("Location API 支持:", isLocationAPISupported() ? "是" : "否");
(2) 安全注意事项
function sanitizeURL(url) {try {const parsed = new URL(url);if (parsed.origin !== location.origin) {console.warn("跨源 URL 被阻止:", url);return null;}return parsed.href;} catch (e) {console.error("无效的 URL:", url);return null;}
}const safeURL = sanitizeURL("https://example.com");
console.log("安全的 URL:", safeURL);
(3) 性能优化
// 防抖处理 URL 变化
let urlChangeTimeout;
window.addEventListener("hashchange", () => {clearTimeout(urlChangeTimeout);urlChangeTimeout = setTimeout(() => {console.log("URL 哈希稳定:", location.hash);}, 300);
});