JavaScript基础教程（九十一）实例之Browser 对象实例：掌控浏览器，JavaScript Browser对象终极秘籍-优快云博客

Browser对象是JavaScript与浏览器交互的基石，提供了控制浏览器窗口、访问用户设备信息等强大能力。下面我们深入解析主要Browser对象及其应用。

1. Window对象 - 浏览器窗口总管

Window对象代表浏览器窗口，是所有全局变量的容器：

// 获取窗口尺寸
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

// 打开新窗口
const newWindow = window.open('https://example.com', '_blank', 'width=600,height=400');

// 定时器控制
const timer = setTimeout(() => {
    console.log('延时执行');
}, 1000);

// 弹出对话框
const isConfirm = confirm('确定要执行此操作吗？');

2. Navigator对象 - 浏览器信息宝库

Navigator对象提供浏览器和操作系统信息：

// 检测浏览器信息
console.log('浏览器名称:', navigator.appName);
console.log('浏览器版本:', navigator.appVersion);
console.log('用户代理:', navigator.userAgent);
console.log('语言偏好:', navigator.language);
console.log('在线状态:', navigator.onLine);

// 检测插件支持
const hasFlash = navigator.plugins['Shockwave Flash'];

3. Screen对象 - 屏幕信息获取

// 获取屏幕信息
console.log('屏幕宽度:', screen.width);
console.log('屏幕高度:', screen.height);
console.log('可用宽度:', screen.availWidth);
console.log('可用高度:', screen.availHeight);

4. Location对象 - URL操控利器

// 操作当前URL
console.log('完整URL:', location.href);
console.log('协议:', location.protocol);
console.log('主机:', location.host);

// 页面重定向
location.href = 'https://newpage.com';

// 重新加载页面
location.reload();

5. History对象 - 浏览历史管理

// 前进后退控制
history.back();     // 等同于点击后退按钮
history.forward();  // 前进到下一个页面
history.go(-2);     // 后退两页

// 添加历史记录
history.pushState({page: 1}, "Title 1", "?page=1");

综合应用示例

// 浏览器检测与适配
function browserCheck() {
    const ua = navigator.userAgent;
    let browserInfo = {};
    
    if (ua.includes('Chrome')) {
        browserInfo.name = 'Chrome';
        browserInfo.version = ua.match(/Chrome\/(\d+)/)[1];
    } else if (ua.includes('Firefox')) {
        browserInfo.name = 'Firefox';
        browserInfo.version = ua.match(/Firefox\/(\d+)/)[1];
    }
    
    return browserInfo;
}

// 响应式布局调整
function adjustLayout() {
    if (screen.width < 768) {
        document.body.classList.add('mobile-layout');
    } else {
        document.body.classList.remove('mobile-layout');
    }
}

// 页面访问统计
const pageInfo = {
    referrer: document.referrer,
    viewport: `${window.innerWidth}x${window.innerHeight}`,
    screen: `${screen.width}x${screen.height}`,
    timestamp: new Date().toISOString()
};

掌握Browser对象的使用，能够让你的Web应用更好地与浏览器环境交互，提供更加智能和自适应的用户体验。这些API虽然基础，但却是构建现代化Web应用不可或缺的工具。