BOM 编程

BOM 编程

介绍

• BOM(浏览器对象模型):
  • 可以通过 js 操作浏览器
• 分类
  • window 代表浏览器的窗口，也是浏览器的全局对象
  • document 代表当前加载的 html 文档
  • navigator 浏览器的信息，可以获取浏览器的版本
  • location 浏览器的地址栏信息，可以获取地址信息，或操作浏览器跳转页面
  • history 浏览器的历史记录，可以操作浏览器的前进后退（不能取到具体记录），且只能在当次访问有效
  • screen 用户的屏幕信息，可以获取用户显示器相关信息`
• BOM 对象都是 window 对象的属性，可以通过 window 对象使用，也可直接

navigator

• 代表当前浏览器信息，该属性可以用来识别浏览器
• navigator 对象的大部分属性已经无效，一般使用其userAgent属性来判断浏览器信息
• IE11已经将微软和 IE 相关标识去除，不能通过userAgent属性来判断。ActiveXObject 是 IE 独有方法，但是 IE11会将该方法的布尔值转换为 false。需要使用"ActiveXObject" in window 来判断

userAgent:

edge:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.188
Chrome：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

//使用正则表达式判断浏览器  
        let ua = navigator.userAgent;  
        console.log(ua);  
        // 判断浏览器  
        if(/firefox/i.test(ua)){  
            alert('firefox');  
        }else if(/chrome[edg]/i.test(ua)){  
            alert('chrome');  
        }else if(/edg/i.test(ua)){  
            alert('edge');  
        }else if("ActiveXObject" in window){  
            alert('ie');  
        }else{  
            alert('unknown');  
        }  

history

• History对象可以用来
  1. 获取历史记录
  2. 操作历史记录
  3. 监听历史记录的变化
  4. 监听历史记录的变化
• length 属性: 获取到当前窗口中的历史记录的数量
• back() 方法:
  1. 返回上一页
  2. 如果没有上一页，返回首页
  3. 如果没有首页，返回 null
• forward() 方法：
  1. 返回下一页
  2. 如果没有下一页，返回首页
  3. 如果没有首页，返回 null
• go() 方法：
  1. 参数为正数，表示向前跳转的页面数
  2. 参数为负数，表示向后跳转的页面数

location

• location:
  • 如果是直接在地址栏输入的，那么 location 就是当前的地址栏信息；
  • 如果直接将属性修改为完整路径，则页面会调整到该路径，且会生成相应的历史记录

属性：

• 获取当前的 url
  • location.href
• 获取当前的协议
  • location.protocol
• 获取当前的域名
  • location.host
• 获取当前的端口
  • location.port
  • location.hash
• 获取当前的查询参数
  • location.search
• 获取当前的完整 url
  • location.toString()
• 获取当前的 hostname
  • location.hostname
• 获取当前的 origin
  • location.origin
• 获取当前的 ancestorOrigins
  • location.ancestorOrigins
• 获取当前的 href
  • location.href

方法：

• 重新加载当前页面，作用与点击刷新按钮一样。传 true 可以强制清空缓存刷新页面
  • location.reload(true)
• 跳转到其他页面，作用和直接修改 url 一样
  • location.assign()
• 可以使用新页面替换当前页面，不会产生历史记录
  • location.replace()