【JavaScript编程】BOM 对象

浏览器对象模型 (BOM)

浏览器对象模型（Browser Object Model）：由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

一、Window 对象

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

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

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

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

尺寸

有三种方法能够确定浏览器窗口的尺寸：

属性	描述
window.innerHeight	浏览器窗口的内部高度(包括滚动条)
window.innerWidth	浏览器窗口的内部宽度(包括滚动条)
ie8及以下
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

var w = window.innerWidth
	|| document.documentElement.clientWidth
	|| document.body.clientWidth;

var h = window.innerHeight
	|| document.documentElement.clientHeight
	|| document.body.clientHeight;

常用属性

属性	描述
window.parent	返回父窗口。
window.top	返回最顶层的父窗口。
window.opener	返回对创建此窗口的窗口的引用。
window.self	返回对当前窗口的引用。等价于 Window 属性。
window.screen	对 Screen 对象的只读引用。见下
window.history	对 History 对象的只读引用。见下
window.location	用于窗口或框架的 Location 对象。见下
window.navigator	对 Navigator 对象的只读引用。见下
window.localStorage	在浏览器中存储 key/value 对。参考 LocalStorage 对象
window.document	对 Document 对象的只读引用。参考 Document 对象

常用方法

方法	描述
window.open()	打开新窗口
window.close()	关闭当前窗口
window.moveTo()	移动当前窗口
window.resizeTo()	调整当前窗口的尺寸
window.alert()	显示带有一段消息和一个确认按钮的警告框。见下
window.confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。见下
window.prompt()	显示可提示用户输入的对话框。见下
window.setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。见下
window.setTimeout()	在指定的毫秒数后调用函数或计算表达式。见下

二、Screen 对象

常用属性

属性	描述
screen.availWidth	可用的屏幕宽度
screen.availHeight	可用的屏幕高度

三、Location 对象

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

常用属性

属性	描述
location.hash	设置或返回一个URL的锚部分（从 # 号开始的部分）。如：#part
location.href	设置或返回当前页面的 URL。如：https://blog.csdn.net/guang_s/article/details/94458654
location.host	设置或返回主机名及端口号。如：blog.csdn.net
location.hostname	设置或返回 web 主机的域名。blog.csdn.net
location.port	设置或返回 web 主机的端口 （80 或 443）。如：80
location.protocol	设置或返回所使用的 web 协议。如：https:
location.pathname	设置或返回当前页面的路径和文件名。如：/guang_s/article/details/94458654
location.search	设置或返回一个URL的查询部分（从 ? 开始的部分）。如：?id=a&billNo=abc100

常用方法

方法	描述
location.reload()	重新加载当前文档。刷新
location.replace()	用新的文档替换当前文档
location.assign()	加载新的文档

四、History 对象

常用属性

属性	描述
location.href	返回当前页面的 URL
location.host	设置或返回主机名及端口号
location.hostname	返回 web 主机的域名
location.port	返回 web 主机的端口 （80 或 443）
location.protocol	返回所使用的 web 协议（http: 或 https:）
location.pathname	返回当前页面的路径和文件名

常用方法

方法	描述
history.back()	后退。go(-1)
history.forward()	向前。go(1)
history.go()	加载某个具体的 URL

五、Navigator 对象

window.navigator 对象包含有关访问者浏览器的信息。

常用属性

属性	描述
navigator.userAgent	返回由客户机发送服务器的user-agent 头部的值
navigator.appCodeName	返回浏览器的代码名
navigator.appName	返回浏览器的名称
navigator.appVersion	返回浏览器的平台和版本信息
navigator.cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
navigator.platform	返回运行浏览器的操作系统平台

常用方法

方法	描述
navigator.javaEnabled()	指定是否在浏览器中启用Java
navigator.taintEnabled()	规定浏览器是否启用数据污点(data tainting)

六、弹窗

警告框

警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。

window.alert("你好，我是一个警告框！");

确认框

确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。
当你点击 确认, 确认框返回 true， 如果点击 取消, 确认框返回 false。

var ret = confirm("确定要删除这条数据吗？");
if (ret === true) {
    alert("删除成功！");
}
else {
    console.log('取消');
}

提示框

提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

window.prompt("sometext","defaultvalue")

七、计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

方法	描述
setInterval(fn, milliseconds)	间隔指定的毫秒数不停地执行指定的代码
setTimeout(fn, milliseconds)	间隔指定的毫秒数执行指定的代码（一次）
clearInterval(intervalVariable)	停止 setInterval() 方法执行的函数代码
clearTimeout(intervalVariable)	停止执行setTimeout()方法的函数代码