BOM（浏览对象模型）

BOM概述

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

浏览器对象模型

window

window对象是浏览器的顶级对象，它具有双重角色

• 它是js访问浏览器的一个接口
• 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用时可以省略window。

window对象6大核心模块：

1. document对象，即文档对象
2. frames，即HTML自框架
3. history，即页面的历史记录
4. location，即当前页面的地址
5. navigator，包含浏览器相关信息
6. screen，用户显示屏幕相关属性

窗口关系及框架

• 如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中
• 可以通过数值索引或者框架名称来访问对应的window对象
• 每个window对象都有一个name属性，其中包含框架的名称

属性	意义
top	最外（高）层框架
parent	当前的父框架，即当前框架的直接上层框架
self	指向自己，即始终指向window

窗口位置

screenLeft和screenTop

属性返回窗口相对于屏幕的X和Y坐标（火狐浏览器不支持）

<script>
		//获取浏览器距离屏幕左边的距离
        console.log('screenLeft' + window.screenLeft);
        //获取浏览器距离屏幕上边的距离
        console.log('screenTop' + window.screenTop);
</script>

screenX和screenY

属性返回窗口相对于屏幕的X和Y的坐标（IE8浏览器不支持）

<script>
		//获取浏览器距离屏幕左边的距离
        console.log('screenX' + window.screenX);
        //获取浏览器距离屏幕上边的距离
        console.log('screenY' + window.screenY);
</script>

pageXOffset和pageYOffset

设置或返回当前页面相对于窗口显示区左上角的X或Y位置

<script>
		//获取浏览器当前页面左上角的x位置
        console.log('pageXOffset' + window.pageXOffset);
        //获取浏览器当前页面左上角的y位置
        console.log('pageYOffset' + window.pageYOffset);
</script>

moveTo（）

接收的是新位置的x和y坐标值

<script>
		//将窗口移动到屏幕左上角
        console.log(window.moveTo(0,0););
        //将窗口移动到(200,300)
        console.log(window.moveTo(200,300););
</script>

moveBy（）

接收的是在水平和垂直方向上移动的像素数

<script>
		//将窗口向下移动100像素
        console.log(window.moveBy(0,100););
        //将窗口向左移动50像素
        console.log(window.moveBy(-50,0););
</script>

窗口大小

innerWidth,innerHeight,outWidth,outHeight是所有现代浏览器都支持的属性

outWigth和outHeight（IE8不支持）

返回浏览器窗口自身的大小，和页面窗口大小没关系（不管是在最外层window上使用，还是在窗格中使用）

<script>
        console.log('outerHeight:' + window.outerHeight);
        console.log('outerWidth:' + window.outerWidth);
</script>

innerWidth和innerHeight（IE8不支持）

返回浏览器窗口中页面视口的大小（计算滚动条高度，不包含浏览器边框和工具栏）

<script>
        console.log('innerHeight:' + window.innerHeight);
        console.log('innerWidth:' + window.innerWidth);
</script>

document.documentElement.clientWidth 和 document.documentElement.clientHeight（IE8不支持）

返回浏览器窗口中页面视口的宽度和高度（不计算滚动条的高度）

<script>
        console.log('clientHeight:' + document.documentElement.clientHeight);
        console.log('clientWidth:' + document.documentElement.clientWidth);
</script>

document.body.clientWidth 和 document.body.clietHeight

返回浏览器窗口中页面视口的宽度和高度（计算滚动条的高度）

<script>
        console.log('clientHeight:' + document.body.clientHeight);
        console.log('clientWidth:' + document.body.clientWidth);
</script>

resizeTo()

用于把窗口大小调整为指定的高度和宽度，接受浏览器窗口新宽度和高度

<script>
		//调整到300*300
        console.log(window.resizeTo(300,300););
</script>

resizeBy（）

用于把窗口大小调整为相对的高度和宽度，接受新窗口与原窗口的宽度和高度之差

<script>
		//调整到200*150
        console.log(window.resizeBy(100,50););
</script>

打开新窗口

用于打开一个新的浏览器窗口，或查找一个已命名窗口，open(URL,name,specs,replace)

• 第一个参数：打开指定页面的URL地址，若没有指定，则打开一个新的空白窗口
• 第二个参数：指定target属性或窗口的名称

name可选值	含义
_blank	URL加载到一个新的窗口，也是默认值
_parent	URL加载到父框架
_self	URL替换当前页面
_top	URL替换任何可加载的框架集
name	窗口名称

• 第三个参数：用于设置浏览器窗口的特征（大小、位置、滚动条等），多个特征之间使用逗号分离

speces可选参数	值	说明
height	Number	窗口的高度，最小值为100
width	Number	窗口的宽度，最小值为100
left	Number	该窗口的左侧位置
top	Number	该窗口的上侧位置
location	yes/no/1/0	是否显示地址字段，默认值是yes
menubar	yes/no/1/0	是否显示菜单栏，默认值是yes
resizable	yes/no/1/0	是否可调整窗口大小，默认值是yes
scrollbars	yes/no/1/0	是否显示滚动条，默认值是yes
status	yes/no/1/0	是否要添加一个状态栏，默认值是yes
titlebar	yes/no/1/0	是否显示标题栏被忽略，除非调用HTML应用程序或一个值得信赖的对话框，默认值是yes
toolbar	yes/no/1/0	是否显示浏览器工作栏，默认值是yes

• 第四个参数：设置为true，表示代替浏览历史中的当前条目；设置为false（默认值），表示在浏览历史中创建新的条目

window.open("www.cnblogs.com","cnblogs","height=100,width=400")

关闭窗口

与open()方法功能相反的是close()方法，用于关闭浏览器窗口，调用该方法的对象就是需要关闭的窗口对象

window.close("www.cnblogs.com","cnblogs","height=100,width=400")

间歇与超时调用

JavaScript是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行

setTimeout（）超时调用

该方法返回一个数值ID，表示超时调用，是计划执行代码的唯一标识符。
setTimeout(function(){},ms);

• 第一个参数：要执行的代码
• 第二个参数：以毫秒表示的时间

<script>
//在一秒后执行输出语句
  var id = setTimeout(() => {
    console.log('Hello World');
  }, 1000);
  console.log(id);
    // 清除超时调用
  clearTimeout(id);
</script>

setInterval（）间歇调用（不常用）

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID用户可以在将来某个时刻取消
setInterval(function(){},ms)

• 第一个参数：要执行的代码
• 第二个参数：以毫秒表示的时间

<script>
  //动态显示时间
  var div = document.createElement('div');
  // 间歇调用
  var id = setInterval(() => {
    div.innerHTML = new Date().toLocaleString();
  }, 1000);
  document.body.appendChild(div);
  // 清除计时器
  clearInterval(id);
</script>

对话框

警告框alert（）

<script>
	alert('这是一个警告框~~');
</script>

• 主要用于提醒用户，确保用户可以得到某些信息
• 它只有一个选项：“确定”，返回的布尔值为“true”
• 在点击“确定”之前，不允许进行下一步操作

确认框confirm（）

<script>
	if (confirm('你喜欢确认框嘛')) {
		alert('Yes! ');
	}else {
		alert('No!');
	}
</script>

• 主要用于提示用户是否要进行下一步操作，用于使用户验证某些信息，避免用户不小心删除了某些重要的数据
• 它有两个选项：“确定”和“取消”，它返回两个布尔值：“true”或“false”
• 同样，在点击“确定”或“取消”之前，不允许进行下一步操作
  
  

提示框prompt（）

<script>
	var result = prompt("What's your name?","");
	if (result !== null) {
		alert('Welcome,'+result);
	}else {
		alert('亲，您还没输入呢')
	}
</script>

• 用于返回输入的信息，或者在进入页面前输入某个值
• 当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能操作
• 点击‘确认’，返回输入的值，点击‘取消’，返回null

location

window对象给我们提供一个location属性用于获取或设置窗体的URL，并且可以用于解析URL，表示方式为也可用window.location

属性

location对象属性	返回值
.hash	返回一个URL的主要部分，即返回片段#后面内容，常见于锚点、链接
.host	返回主机域名，即服务器名字
.hostname	通常等于host，有时会省略前面的www
.href	当前载入页面的完整URL
.pathname	URL中主机名后的部分，即返回路径
.port	返回端口号，如果未写返回空字符串
.protocol	URL中使用的协议，即双斜杠之前的部分
.search	执行GET请求的URL中的问号后的部分，又称查询字符串

方法

刷新页面

location.assign()

window.location.assign("http://www.runoob.com")

• 可以跳转页面，加载一个新的文档，跳转到指定URL

location.reload()

• 重新加载当前文档，没有参数或者参数是false，他会检测服务器上的文档是否已经改变。
• 如果文档已改变，reload()会再次下载该文档
• 如果文档未改变，则该方法将从缓存中装载文档
• 如果参数为true，那么会绕过缓存，从服务器中重新下载该文档

location.replace()

window.location.replace("http://www.runoob.com")

• 用一个新文档取代当前文档，不会在History对象中生成一个新的记录
• 使用该方法时，新的URL会覆盖History对象中的当前记录

navigator

navigator对象包含有关浏览器的信息，没有应用于navigator对象的公开标准，不过所有浏览器都支持该对象

属性

navigator对象属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appMinorVersion	浏览器补丁版本
appVersion	返回浏览器的平台和版权信息
cpuClass	cpu类型
platform
操作体系类型
cookieEnabled	返回指明浏览器中是否启用cookie的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent头部的值
onLine	用户是否在线
systemLanguage	客户体系语言

方法

navigator.javaEnabled()

//返回当前浏览器是否已启用java的布尔值
document.write("启用Java: " + navigator.javaEnabled());

• 所有浏览器都适用
• 指定是否在浏览器中启用java

navigator.taintEnabled()

document.write("启用数据污点: " + navigator.taintEnabled());

• 规定浏览器是否启用数据污点
• 可返回一个布尔值
• 只有Internet Explorer和Opera浏览器支持

screen

属性

screen对象属性	说明
width	屏幕宽度
height	屏幕高度
colorDepth	屏幕颜色深度
availWidth	可用宽度（不包括任务栏）
availHeight	可用高度（不包括任务栏）
pixealDepth	屏幕颜色分辨率（每像素的位数）

history

• 包含用户（在浏览器窗口中）当问过的URL
• 是window对象的一部分，可通过window.hostory属性对其访问

属性

history.length

• 历史页面中的URL数量
• 最小为1，最大为50，即只能存50个页面历史记录

方法

history.back() \ history.forward() \ history.go()

• 分别表示跳转至上一个界面、下一个界面、指定页面的上下某个页面
• history.go(-1) = history.back() ; history.go(1) = history.forward()
• history.go(0)当前页面刷新；history.go(2)回到上两个页面
• 使用这三个方法进行页面跳转时，页面会从浏览器缓存中加载，而不是重新加载，不触发onload方法，因此会保存原页面状态