JavaScript 浏览器对象

JavaScript 浏览器对象

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年4月30日

BOM浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，BOM提供了很多对象，包括：Window、Navigator、Screen、History、Location等。其中Window对象为顶层对象，其他对象都为Window对象的子对象。BOM的核心对象是window。

Window对象：

Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。

Window对象的方法：

alert()显示带有一段消息和一个确认按钮的警示框

confirm()显示带有一段消息以及确认按钮和取消按钮的对话框

window.open（）打开一个新的浏览窗口或查找一个已命名的窗口

window.close（）关闭当前浏览窗口

window.moveTo() 移动当前窗口

window.resizeTo() 调整当前窗口的尺寸

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式

setTimeout() 在指定的毫秒数后调用函数或计算表达式

其他方法：

moveBy、moveTo、resizeBy、resizeTo、scrollBy、scrollTo、focus、blur等

 下面是Window对象一些方法的使用，案例代码截图图如下：

做了一个简单的页面跳转，window.open() 、window.close() 打开与关闭一个新的独立的窗口 ，window.history返回浏览过页面，window.location()两个对象方法的返回输出功能。

接下来是BOM浏览器对象模型其它的对象方法、属性简结。

Window尺寸：

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet
Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

对于 Internet
Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者
document.body.clientHeight
document.body.clientWidth

Window Location对象：

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问
window.location() 对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面。window.location() 对象在编写时可不使用 window 这个前缀。
location.hostname() 返回 web 主机的域名
location.pathname() 返回当前页面的路径和文件名
location.port() 返回 web 主机的端口（80 或 443）
location.protocol() 返回所使用的 web 协议（http:// 或 https://）
location.href() 属性返回当前页面的 URL。
assign() 加载新的文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档

Window History对象：

window.history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。window.history 对象在编写时可不使用 window 这个前缀。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

history对象属性：length 返回浏览器历史列表中的URL数量

history对象方法：

方法 描述

back() 加载history列表中的前一个URL

forward() 加载history列表中的下一个URL

go() 加载history列表中的某个具体的页面

返回前一个浏览的页面： 语法： window.history.back();

back()相当于go(-1), 代码如：window.history.go(-1);

返回下一个浏览的页面：

forward()方法，加载 history 列表中的下一个 URL。

如果倒退之后，再想回到倒退之前浏览的页面，则可以使用forward()方法,代码如下:

window.history.forward();

注意：等价点击前进按钮。

forward()相当于go(1),代码如:window.history.go(1);

返回浏览历史中的其他页面:

go()方法，根据当前所处的页面，加载
history 列表中的某个具体的页面。

语法：window.history.go(number);

window.history.go(1); 前一个，等价于forward();

window.history.go(-1); 后一个，等价于back();

window.history.go(3); 返回当前页面之后浏览过的第三个历史页面

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。一些方法：

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击按钮向前相同

Window Navigator对象：

Navigator 对象包含有关浏览器的信息

window.Navigator对象,包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。

navigator.appCodeName; 浏览器代码名的字符串表示

navigator.appName; 返回浏览器的名称

navigator.appVersion; 返回浏览器的平台和版本信息

navigator.platform; 返回运行浏览器的操作系统平台

navigator.userAgent; 返回由客户机发送服务器的user-agent头部的值。返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

语法:navigator.userAgent

Window Screen对象：

Screen 对象中存放着有关显示浏览器屏幕的信息，用于获取用户的屏幕信息。

语法：window.screen.

对象属性:

 属性                               描述

window.screen.availHeight; 窗口可以使用的屏幕高度，单位像素

window.screen.availWidth; 窗口可以使用的屏幕宽度，单位像素

window.screen.colorDepth; 返回目标设备或缓冲器上的调色板的比特深度，通常为32位(每像素的位数)

window.screen.pixelDepth; 返回显示器屏幕的颜色分辨率，通常为32位(每像素的位数)(IE不支持此属性)

window.screen.height; 返回显示器屏幕的高度，单位像素

window.screen.width; 返回显示器屏幕的宽度，单位像素

window对象方法open()、close()可以打开与关闭一个新的窗口，history对象方法可以返回倒退之前的浏览页面，location对象方法可以跳转到另一个页面。如下面的效果图所示，点击第一个按钮，页面从原来的jQuery/Window跳转到了绑定页面jQuery/Select页面，并且能够实现该页面所设的功能。打开一个新的独立的窗口里面的功能也能实现，可随意拖动该窗口、调整大小。Location对象方法host()将主机号和当前URL的端口号返回，href()将完整的URL返回（效果如图所示）。下面是实现的效果图：