十二、BOM

一、window对象

BOM的核心是window对象，window既是ECMAScript中的Global对象，又是浏览器窗口的JavaScript接口

1.Global作用域

var声明的全部全局变量和函数都会成为window的属性和方法

访问未声明的变量会报错，但是可以在window对象上查询是否存在未声明的变量

2.窗口关系

 top: 始终指向最外层窗口，浏览器窗口本身

 parent: 始终指向当前窗口的父窗口，如果当前窗口为最外层窗口，则parent === top

 self：始终指向window本身

3.窗口位置和像素比

 screenLeft / screenTop : 用于表示窗口相对屏幕左侧和顶部的位置 （单位CSS像素）

 moveTo(x,y) / moveBy(x,y): 移动窗口

 window.devicePixelRatio: 物理像素与CSS像素之间的转换比率，与每英寸像素数（DPI）对应

4.窗口大小

outerWidth / outerHeight: 浏览器窗口自身大小

innerWidth / innerHeight: 浏览器窗口中页面视图大小

 document.documentElement.clientWidth / document.documentElement.clientHeight / document.body.clientWidth / document.body.clientHeight

resizeTo(x,y) / resizeBy(x,y) ：调整窗口大小

5.视口位置

 window.pageXoffset / window.pageYoffset
 window.scrollX / window.scrollY :  文档相对于视口滚动距离的位置

 scroll() scrollTo()   scrollBy() : 滚动页面，前两个方法接受目标位置的坐标，后者接受相对偏移

这几个方法也接受ScrollToOptions字典 { left: 100, top: 100, behavior: 'smooth' / 'auto' }

6.导航与打开新窗口

 window.open(url, targetWindowName, prefect, replaceBool) 打开一个新的窗口

url： 窗口的url

targetWindowName: 目标窗口名，可以是窗口名，也可以是“_self" "_parent" "_top" "_blank"等特殊窗口名

Prefect: 特性字符串

replaceBool: 新窗口在浏览器历史记录中是否替换当前加载页面

6-1）弹出窗口

特性字符串是用逗号分隔的设置字符串

fullscreen	yes / no	表示新窗口是否最大化，仅限IE10支持
location	Yes / no	是否显示地址栏 no
Menubar	yes / no	是否显示菜单栏 no
resizable	Yes / no	是否可以拖动改变新窗口大小 no
scrollbars	yes/ no	是否可以在内容过长时滚动 no
status	yes / no	是否显示状态栏 no
toolbar	yes/ no	是否显示工具栏 no
top	数值	新窗口的y轴坐标
width	数值	新窗口的宽度，不能小于100
height	数值	新窗口的高度，不能小于100
left	数值	新窗口的x轴坐标, 不能为负

Window.open()返回一个新窗口的引用。

Window.open()打开的窗口可以通过close(）关闭，关闭后虽然引用还在，但是只能访问其closed属性检查是否关闭

新打开的窗口有一个openr属性，指向打开它的窗口

6-2）安全限制

IE7开始不能隐藏地址栏。不能移动或缩放弹窗

Firefox1 禁止隐藏状态栏

Opera只能在主窗口打开新窗口，并且不允许出现在在系统对话框的位置

浏览器会在用户操作下才允许创建弹窗

6-3）弹窗屏蔽

所有现代浏览器都内置了屏蔽弹窗的程序

检测弹窗是否被屏蔽，使用tray/catch调用window.open()，并检测返回值是否为null

7.定时器

setTimeout()           setinterval()

clearTimeout()        clearInterval()

8.系统对话框

 alert()

 comfirm()   有返回值true/false

 prompt() 取消返回null,否则返回输入的字符创

异步显示的对话框

Find() 查询

Print() 打印

二、location对象

提供当前窗口中加载文档的信息，既是window对象，又是document对象（window.location === document.location)

location.hash	URL散列值
location.host	服务器名及端口号
location.hostname	服务器名
location.href	当前加载页面的完整url
location.pathname	url中的路径和文件名
location.port	端口号
location.portacol	协议
location.search	查询字符串，以问号开头
location.username	域名前指定的当前用户
location.password	域名前指定的密码
location.origin	Url的源地址

URLSearchParams：

提供一组标准的api方法，通过它们可以检查和修改查询字符串

操作地址

修改浏览器地址

                location.assign(url)           window.location = url            location.href = url

以上三种方法都会立即启动导航到新url的操作，并在浏览器历史记录中添加一条记录

修改location的属性也会修改当前加载的页面

 replace(url) 重新加载后不会新增历史记录

 reload() // 重新加载当前页，最有效的方法           reload(true)  重新从服务器加载当前页

三、navigator对象

其属性通常用于确定浏览器类型

检测插件：除了IE10及更低版本外的浏览器，都可以通过plugins数组确定是否安装了某个插件，每一项包含

 name:插件名

 description: 插件描述

 filename: 插件的文件名

 length: 由当前插件处理的MIME类型数量

旧版本IE浏览器检测插件，要使用专有的ActiveXObject，并尝试实例化特定的插件，每个插件有一个唯一的字符串标识符标识

plugins有一个refresh()方法，属性plugins属性以反映新安装的插件。接受boolean参数，true表示所有包含插件的页面都会重新加载；否则只有plugins会更新，页面不会重新加载。

注册处理程序

registerProtocolHandler(协议mailto/ftp，处理该协议的url, 应用名称)

将web应用程序注册为像桌面应用程序一样的默认应用软件

四、Screen对象

浏览器外面的客户端显示器的信息

五、History对象

当前窗口首次使用以来的用户导航历史记录

 go(n)  前往第几页

 go(url) 前往特定网址  back()   forward()

 length:历史记录数目

历史状态管理

Hashchange()  会在页面url的散列变化时被触发，开发者可以在此时做一些操作

History.pushState(stateObj, newTitle, 相对url)

单击后退时，会触发popstate事件