常见的浏览器对象

BOM( Browser Object Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

1. window
2. history
3. location
4. navigter
5. screen
6. document

window对象

window对象不但充当全局对象，还表示当前浏览器的窗口，

• 全局变量就是window对象的属性，全局函数就是window对象的方法

alert()

确定提示框

• 由浏览器向用户弹出提示性信息。该方法包含一个可选的提示信息参数。如果没有指定参数，则弹出一个空的对话框。

prompt()

选择提示框

• 由浏览器向用户弹出提示性信息，弹出的对话框中包含两个按钮，分别表示“确定”和“取消”按钮。如果点击“确定”按钮，则该方法将返回 true；单击“取消”按钮，则返回 false。confirm() 方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个空的对话框。

confirm()

输入提示框

• 可以接收用户输入的信息，并返回输入的信息。prompt() 方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个没有提示信息的输入文本对话框。

window.onload

窗口加载事件

• 当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等),就调用的处理函数。

window.innerWidth 和 window.innerHeight

获得当前浏览器的宽和高（除去工具栏和滚动条）

窗口方法

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() -移动当前窗口
• window.resizeTo() -重新调整当前窗口

history对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。

history.go()

• 接收一个整数数字或者字符串参数：向最近的一个记录中包含指定字符串的页面跳转

history.go('maixaofei.com')	//向前或者向后寻找指定字符串页面，没有找到则无响应
history.go(3)	//向前跳转三个记录
history.go(-1)	//向后跳转一个记录

1. history.forword()

• 向前跳转一个页面

1. history.back()

• 向后跳转一个页面

1. history.length

• 获取历史记录数，如果是打开的第一个页面，则 history.length == 0，可以用该属性来判断当前打开的网页是不是该窗口打开的首个网页。

location对象

location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

URL：

统一资源定位器(Uniform Resource Locator,URL)是互联网上标准资源的地址（俗称网址）。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

• URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。
• URL一般语法规格:

protocol :// hostname[:port] / path / [;parameters][?query]#fragment

协议://主机名:端口号/路径/参数

• 路径：由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

1. hash

• 设置或返回从井号 (#) 开始的 URL（锚）。

1. host

• 设置或返回主机名和当前 URL 的端口号。

1. hostname

• 设置或返回当前 URL 的主机名（域名）。

1. href

• 设置或返回完整的 URL。

1. pathname

• 设置或返回当前 URL 的路径部分。

1. port

• 设置或返回当前 URL 的端口号（如果端口号是默认值（http的端口号为80,https的端口号为443），大部分浏览器显示0或者不显示）。

1. protocol

• 设置或返回当前 URL 的协议。

1. earch

• 设置或返回从问号 (?) 开始的 URL（查询部分）。

navigter

1. navigator.appName：浏览器名称；注意："Netscape" 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。
2. navigator.appVersion：浏览器版本；
3. navigator.appCodeName：返回浏览器的应用程序代码名称
4. navigator.language：浏览器设置的语言；
5. navigator.platform：操作系统类型；
6. navigator.userAgent：浏览器设定的User-Agent字符串。
7. navigator.cookieEnabled： 返回 true，如果 cookie 已启用，否则返回 false。
8. navigator.product：返回浏览器引擎的产品名称
9. navigator.platform：返回浏览器平台（操作系统）
10. navigator.onLine： 属性返回 true，假如浏览器在线
11. navigator.javaEnabled()：方法返回 true，如果 Java 已启用

来自 navigator 对象的信息通常是误导性的，

不应该用于检测浏览器版本，因为：

• 不同浏览器能够使用相同名称
• 导航数据可被浏览器拥有者更改
• 某些浏览器会错误标识自身以绕过站点测试
• 浏览器无法报告发布晚于浏览器的新操作系统

screen

表示用户屏幕的信息

1. screen.width 返回以像素计的访问者屏幕宽度
2. screen.height 返回以像素计的访问者屏幕的高度
3. screen.availWidth 返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征
4. screen.availHeight 返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征
5. screen.colorDepth 返回用于显示一种颜色的比特数
6. screen.pixelDepth 返回屏幕的像素深度，对于现代计算机，颜色深度和像素深度是相等的。

document

表示当前页面，由于html在浏览器中是以DOM形式表示为树形结构，document对象就是整个DOM树根节点

• document对象的属性实在是有点多，所以这边就不解释太多，大家可以看官方文档www.w3school.com.cn/js/js_htmld…
• 不过这边重点介绍一下document.cookies :返回读取当前页面的cookies值

Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。

• 由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在HTML页面中引入第三方的JavaScript代码是允许的；如果引入的第三方的JavaScript中存在恶意代码，则 www.foo.com 网站将直接获取到 www.example.com 网站的用户登录信息。
• httpOnly：设定了httpOnly类型的cookies不能被JS读取到。整个行为有浏览器控制，现在主流浏览器都支持httpOnly选项。为了确保安全，服务器端在设置cookies时应该始终坚持设置httpOnly选项