BOM

BOM ：Browser Object Model 浏览器对象模型

用js操作浏览器的前进,后退,刷新,打印,关闭,打开..功能

BOM的核心就是window对象

window是浏览器内置的一个对象，里面包含着操作浏览器的方法

document 文档 (重点)、history 历史页面访问记录 (重点) 、location 地址信息 (重点)、screen 屏幕 (了解)、navigator 导航 (了解)、frames

open( ) 打开

_self 在当前窗口打开
_parent 在当前窗口打开
_blank 打开新的窗口

open("http://www.baidu.com","_self")   //在当前窗口打开百度
open("http://www.baidu.com","_parent")   //在当前窗口打开百度
open("http://www.baidu.com","_blank")   //新开一个窗口打开百度

open("http://www.baidu.com","baidu")  //新建页面并打开百度,窗口命名为baidu
//注: 不命名会每次打开新窗口，命名的第一次打开新窗口,之后在这个窗口中加载。

第三个字符串参数:

//width/height:  新窗口的宽度和高度, top/left: 新窗口的Y坐标和X坐标
open("http://www.baidu.com","baidu","width=400,height=400,top=200,left=200" )

opener: 父窗口对象

location地址信息

在window中有一个对象叫做location，就是专门用来存储浏览器的地址栏内的信息

地址栏信息

常用的端口号有：
- http协议：默认端口号是80
- https协议：默认端口号是443
- mysql：默认端口3306

location获取地址栏信息的方法

中文乱码问题
- encodeURIComponent 编码（理解：使中文变成乱码）
- decodeURIComponent 解码（理解：使中文能正常显示）

// encodeURIComponent   编码（理解成：乱码）
// decodeURIComponent   解码（理解：使中文能正常显示）
console.log(location.href)  //完整路径，有乱码
console.log(decodeURIComponent(location.href))  //完整路径解码
console.log(location.protocol)  //协议
console.log(location.host); //主机名称+端口号
console.log(location.hostname);     //主机名称
console.log(location.port);     //端口号
console.log(encodeURIComponent("你好！"))   //%E4%BD%A0%E5%A5%BD%EF%BC%81
console.log(decodeURIComponent("%E4%BD%A0%E5%A5%BD%EF%BC%81")); //你好
console.log(location.path)  //undefined
console.log(location.pathname)  //路径名称
console.log(decodeURIComponent(location.pathname))
console.log(location.search)    // ?+query
console.log(location.hash); //锚点

location跳转方式

4种，代码如下

location.href = "http://baidu.com"
location  = "http://baidu.com"
location.assign("http://baidu.com")

// replace跳转不会有历史记录，所以不能回退
location.replace("http://baidu.com")

location刷新

location.reload()

history 历史

记住三个方法：
- back() 后退
- forward() 前进
- go() -->括号内-1后退，0刷新，1前进
【注】前提是要有历史记录才可以前进或后退

navigator

当前浏览器版本的信息,操作系统的信息
方法:
- navigator.userAgent (重点）
- navigator.appCodeName （了解）
- navigator.appName （了解）
- navigator.appVersion （了解）
使用navigator.userAgent获取的信息太过繁琐和杂乱，我们一般要获取的是前浏览器版本的信息,操作系统的信息，上网搜现成的方法就可以获取到包含这两个数据的对象，如下代码:

    function getBrowserInfo() {
        const userAgent = navigator.userAgent.toLowerCase()
        // 检查userAgent以确定浏览器类型
        const isIE = userAgent.includes('msie') || userAgent.includes('trident')
        const isEdge = userAgent.includes('edg/')
        const isFirefox = userAgent.includes('firefox/')
        const isChrome = userAgent.includes('chrome/')
        const isSafari = userAgent.includes('safari/') && !isChrome

        // 从userAgent中提取版本号
        const version = (
          (isIE && userAgent.match(/(msie|rv:)\s?([\d.]+)/)?.[2]) ||
          (isEdge && userAgent.match(/edg\/([\d.]+)/)?.[1]) ||
          (isFirefox && userAgent.match(/firefox\/([\d.]+)/)?.[1]) ||
          (isChrome && userAgent.match(/chrome\/([\d.]+)/)?.[1]) ||
          (isSafari && userAgent.match(/version\/([\d.]+)/)?.[1]) ||
          ''
        )

        // 根据浏览器类型返回名称
        const name = (
          (isIE && 'ie') ||
          (isEdge && 'Edge') ||
          (isFirefox && 'Firefox') ||
          (isChrome && 'Chrome') ||
          (isSafari && 'Safari') ||
          ''
        )

        // 返回包含浏览器名称和版本号的对象
        return {
          name,
          version
        }
      }