BOM

什么是BOM对象

js = ECMAScript （ES）+ BOM + DOM

BOM（Browser Object Model）浏览器对象模型 BOM 使 JavaScript 有能力与浏览器“对话” BOM尚无正式标准,但是浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性（window）

window对象

• 表示浏览器窗口，所有浏览器都支持 window 对象

• 所有 JavaScript 全局对象、全局函数以及全局变量均自动成为 window 对象的成员

• 全局变量是 window 对象的属性

• 全局函数是 window 对象的方法

• window对象是BOM模型中的顶层对象，因此所有BOM模型中的对象都是该对象的子对象

• HTML DOM 的 document 也是 window 对象的属性之一

子对象	作用
document	文档对象用于操作页面元素
location	地址对象用于操作URL地址
navigator	浏览器对象用于获取浏览器版本信息
history	历史对象用于操作浏览器历史
screen	屏幕对象用于操作屏幕的高度和宽度

　　属性

**属性名**	**说明**
closed	返回一个布尔值，用于判断窗口是否已经关闭。

window对象的所有子对象都是window对象的属性 所有的全局变量也都是 window 对象的属性

　　方法

　　　　　　　　窗口控制

**方法名**	**说明**
open([url],[_blank],[width|height|left|top])	打开新页面
close()	关闭当前页面
moveTo(x,y)	移动窗口到指定坐标
moveBy(x,y)	相对当前位置移动
resizeTo(x,y)	窗口大小调整到指定宽高
resizeBy(+w,+h)(可以是正、负数值)	窗口大小增减宽高

　　　　　　　　弹窗方法

**方法名**	**说明**
alert("信息内容")	弹出一个警告框
confirm("信息内容")	弹出一个确认对话框
prompt("信息内容",["默认输入内容"])	弹出一个提示对话框

window对象的子对象

document对象

文档对象

dom操作的部分即为document对象的功能

location对象

location 对象用于获得当前页面的地址 (URL)，或把浏览器重定向到新的页面

window.location="https://www.qtummatrix.com/"

属性 (了解)

属性名	说明
pathname	返回当前页面的路径和文件名。
href	返回当前页面的 URL（重点）
hostname	返回域名
port	返回端口
protocol	返回协议
search	返回传值部分 （重点）

修改href的值

location.href="https://www.baidu.com/"
console.log(window.location.pathname);  // 返回文件名和路径地址
// console.log(location.pathname); // 可以省略window
console.log(location.href);  // 返回当前页面的url路径
console.log(location.hostname); // 返回域名 127.0.0.1
console.log(location.port); // 返回端口号 5500
console.log(location.protocol); // 返回协议 http
console.log(location.search); // 返回参数值
console.log(location.hash); // 返回哈希值

方法

方法名	说明
reload([true|false])	从服务重新加载页面，true为绕过缓存,默认为false

history对象

history对象是JavaScript中的一种默认对象，该对象可以用来存储客户端浏览器窗口最近浏览过的历史网址。通过History对象的方法，可以完成类似于浏览器窗口中的前进、后退等按钮的功能

　　　　方法

方法名	说明
go(num)	该方法可以直接跳转到某一个已经访问过的URL。
forward()	该方法可以前进到下一个访问过的URL,等价于go(1)
back()	该方法可以返回到上一个访问过的URL,等价于go(-1)

　　　　　　back()表示返回到上一页面，效果相当于go(-1); f

　　　　　　orward()表示返回到下一页面，效果相当于go(1);

　　　　　　go()用于指定页的跳转，比如go(-2)表示返回到浏览过的前两个页面

 

navigator对象

navigator对象，也称为浏览器对象，该对象包含了浏览器的整体信息，如浏览器名称、版本号等

　　　　　　

appName	返回浏览器的名称
appVersion	返回浏览器的版本号
browserLanguage	返回当前浏览器的语言。[不兼容]
platform	返回运行浏览器的操作系统或硬件平台
cookieEnabled	检测浏览器是否支持Cookie。该属性值为布尔类型，如果浏览器支持Cookie则返回true，否则返回false
userAgent	一个只读的字符串，获取浏览器用于 HTTP 请求的用户代理头的值

案例：判断是否是手机端，是否要跳转手机端页面

if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
        window.location.href = ''; // 手机端 
}else{
    window.location.href = ''; // 电脑
}

screen对象

简单了解

1. screen对象是一个由JavaScript自动创建的对象，该对象的作用主要是描述客户端的显示器的信息，例如屏幕的分辨率、可用颜色数等。

2. screen对象是一个全局对象，该对象中存放的都是静态属性，这些属性值是只读的

属性名	说明
height	屏幕的高度，单位为像素
width	屏幕的宽度，单位为像素
colorDepth	颜色深度
availHeight	显示器可用的屏幕高度，单位为像素。（不含任务栏）
availWidth	显示器可用的屏幕宽度，单位为像素

 

decodeURIComponent() 函数编码 解码；

encodeURIComponent() 函数编码 加密；