前端笔记第一期（BOM）

什么是BOM

Browser Object Model，浏览器对象模型

处理浏览器窗口和框架，描述了与浏览器进行交互的方法和接口，可对浏览器窗口进行访问和操作

解决问题：如何用js操作浏览器

BOM的核心 – window

• window对象是BOM的核心对象，主要是玩转window的属性和方法
• window对象有双重角色，既是通过js访问浏览器窗口的一个接口，又是一个全局对象

BOM和DOM的关系

• JS语法的标准化组织是ECMA
• DOM的标准化组织是W3C

BOM的组成

• Window JavaScript：层级中的对象表示浏览器窗口
• Navigator：包含客户端浏览器信息
• History：包含了浏览器窗口访问过的URL
• Location：包含了当前URL的信息
• Screen：包含了客户端显示屏的信息

详解 Window

1. 对象属性

• innerheight：返回窗口的文档显示区的高度
• innerwidth：放回窗口的文档显示区的宽度
• pagerXOffset：设置或返回当前页面相对于窗口显示区左上角的 X 位置
• pagerYOffset：设置或返回当前页面相对于窗口显示区左上角的 Y 位置

页面懒加载（用户看到哪加载到哪，节省资源，响应更快）

• screenLeft：只读整数，声明了浏览器窗口左上角在电脑屏幕上的位置（兼容性不同）
• screenTop
• screenX
• screenY

在HTML文件中可以进行HTML文件的嵌套，即HTML中存在另一个HTML
使用iframe标签进行嵌套

father.html 文件中有如下代码
<iframe src="./child.html" width='400' height='400' frameborder='1'></iframe>

• parent：返回父窗口，即father.html
• top：返回最顶层的祖先窗口

2. 对象方法

• alert( )：显示一段消息和一个确认按钮的警告框，中断一切操作
• confirm( )：显示一段消息和确认取消的警告框，返回值为true或false
• prompt( )：显示一段消息，确认取消的警告框，输入框，返回值为输入的字符
• onbeforeunload( )：关闭网页时，弹窗提示是否确认关闭，window.onbeforeunload() = function(){return 0}
• open( )：新打开一个窗口

window.open('https://www.baidu.com', 'duyi', 'width=200, height=200')

Navigator对象

1. 对象属性

• userAgent：返回由客户机发送服务器的user-agent头部的值（浏览器嗅探）
• cookieEnabled：判断浏览器是否启用cookie，缓存，账户一段时间免登陆
• onLine：判断系统是否脱机，系统联网返回true，断网为false（离线缓存的判断依据）

              浏览器之前联网请求的数据存入缓存中，若判断断网后再次访问，读取缓存中信息，若判断为联网，再次请求新的数据

History对象

1. 对象属性

• length：返回浏览器历史列表中的URL数量（当前窗口一共有多少页面的变化）

2. 对象方法

• back( )：后退，返回上一个URL
• forward( )：前进，加载下一个URL
• go( )：前往某个具体的页面（-2：两个页面前，2：两个页面后）

Location对象

1. 对象属性

• protocol：协议（https）
• host：域名（www.baidu.com）
• pathname：路径（/s）
• search：参数
• hash：锚点（#123）

2. 对象方法

• assign( )：当前窗口加载新的文档 ( history.assign(https://www.baidu.com) )
• reload( )：刷新页面，传参为空或false，从缓存中提取页面；传参为true，从服务器中刷新最新的页面

单页面应用

每个URL中都有锚点，锚点改变不会刷新页面，用户体验感较好

1. 根据锚点的信息来选择对应要展示的内容
2. 在切换内容时，我们映射到锚点中
3. 监测锚点修改，一旦修改，再映射内容