前端复习之BOM

The Browser Object Model(BOM) allows JavaScript to “talk to” the browser.

BOM让JavaScript能够和浏览器“对话”。

1. 什么是BOM

BOM,Browser Object Model,即浏览器对象模型。浏览器页面初始化时,会在内存创建一个全局对象,用来描述当前窗口的属性和状态,这个全局对象被称为浏览器对象模型。

不同于DOM的标准化组织是W3C,JavaScript的语法标准化组织是ECMA,BOM没有官方标准,它最初是Netscape浏览器标准的一部分,也就是说,对于现代浏览器,每个浏览器都有自己的BOM实现方法,所以直接使用BOM会有兼容性问题

Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM.

By w3cschool

但是为了利用JavaScript完成交互,现代浏览器几乎都实现了相同的方法和属性,这些方法和属性被称作BOM的方法和属性。

2. BOM包含哪些内容

BOM有一个核心对象windowwindow对象包含了6大核心模块,分别是:

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

img

3.1 window对象

BOM的核心对象就是windowwindow对象也是BOM的顶级对象,所有浏览器都支持window对象,它代表的是浏览器的窗口。

JavaScript的所有全局对象、全局方法和全局变量全都自动被归为window对象的方法和属性,在调用这些方法和属性的时候可以省略window。DOM也是window对象的属性。

1
2
3
window.document.getElementById("header");
//等同于
document.getElementById("header");

window对象的size

window对象有两个用来定义浏览器窗口大小的属性(两个属性均返回以px像素为单位的数值):

  • window.innerHeight

    它返回浏览器窗口的高度

  • window.innerWidth

    返回浏览器窗口的宽度

注意:

浏览器窗口的视窗不包括工具栏和滚动条。

也就是说,全屏状态下,不同的浏览器因为布局不一样,也会返回不同的innerHeightinnerWidth

我们随便用一个页面来测试一下,在页面添加如下内容:

1
2
3
4
5
6
<script>
console.log("width: " + window.innerWidth);
console.log("height: "+ window.innerHeight);
console.log(typeof window.innerWidth);
console.log(typeof window.innerHeight);
</script>

用chrome全屏打开:

image-20180904113858953

用safari全屏打开:

image-20180904113940200

高度上的区别是因为我的chrome中添加了书签栏,但是Safari没有,而且两个浏览器本身窗口的设计就有区别;宽度上的区别是因为我随手拉开控制台的宽度不一样,视窗大小是不包含控制台的宽度的。

对于IE 5-8,innerWidthinnerHeight并不兼容,需要使用:

  • document.documentElement.clientHeight / document.documentElement.clientWidth

或者

  • document.body.clientHeight / document.body.clientWidth

比较全面的写法是:

1
2
3
4
5
6
7
let w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

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

window的方法

window.open(url, target, specs, replace)

打开一个新的窗口。四个参数(均为可选)分别是:

  • url 要打开窗口的路径
  • target 打开方法
    • _blank 在新窗口打开,默认设置为_blank
    • _self 在原窗口打开,替代原窗口
    • _parent 在父框架中打开
    • name 指定在某个窗口打开
  • specs 规定新窗口的样式(用逗号连接,不用空格)
    • width=pixels
    • height=pixels
  • replace 是否在history列表中替代当前页面
1
2
3
4
5
6
7
8
9
<button onclick="myFunction()">
click to open
</button>

<script>
function myFunction(){
window.open("","","width=200,height=100");
}
</script>
1
window.open("https://www.w3schools.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
window.close()

关闭当前窗口

window.moveTo()

移动窗口到特定位置

window.resizeTo()

修改窗口大小

3.2 document对象

渲染引擎在解析HTML对象时,会生成一个document对象,即文档对象,它是HTML文档的根节点。每一个元素都会生成对应的DOM对象,由于元素之间有层级关系,整个HTML代码解析结束后,会生成一个由不同节点组成的树形结构,成为DOM树。document用于描述DOM树的状态和属性,并提供了很多操作DOM的API。

3.3 frames

frame指HTML子框架,即在浏览器里嵌入另一个窗口。父框架和子框架拥有独立的作用域和上下文。

window.frames返回的是一个类数组的对象,对象的内容是当前页面中的<iframe>元素。这些<iframe>元素可以通过索引号来获得。

1
2
window.frames[0].location = "https://www.baidu.com";
frames.length; //子框架的个数

<frame>元素也是frames的一种,是一种只读元素,但是它无法在HTML5中使用。

3.4 history

window.history对象包含浏览器的历史记录,window可以省略。这些历史记录以栈(FIFO)的形式保存。页面前进则入栈,页面返回则出栈。

它是一个只读对象,为了保护用户的隐私,JavaScript在获取这个对象时会受到限制。History对象不允许未授权代码访问会话历史(session history)中的其他页面地址,但可以导航到其他会话历史指向的页面。未授权代码无法清除history,也不能禁止后退/前进功能。

最接近于操作history的方法是location.replace()方法,它可以将会话历史中的当前页面地址替换成指定地址。

history的方法

  • history.back() 跳转到历史记录中的前一个链接
  • history.forward() 跳转到历史记录中的后一个链接

3.5 location

window.location可以用户获取当前页面地址以及重定向到一个新的页面。

location的属性

  • window.location.href 返回当前页面的地址
  • window.location.hostname 返回当前页面的域名
  • window.location.pathname 返回当前页面的路径和文件名
  • window.location.protocol 返回网页使用的协议(http: 还是 https:)
  • window.location.port 返回当前页面的端口,如果页面使用的是默认端口(http:80,https:443),则大多数浏览器会显示为0或者不显示
  • window.location.assgin 加载一个新的文档

3.6 navigator

navigator对象也是一个只读对象,它用来描述浏览器本身的信息,包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。

navigator有很多获得浏览器信息的办法,但是大多数办法并不提倡使用,因为它们返回的数据并不准确(如appCodeName, appName, platform等)

  • navigator.appName 返回浏览器名称(IE11, chrome, firefox, safari都返回Netscape)
  • navigator.appCodeName 返回当前浏览器的内核(chrome, IE, safari和Opera都返回Mozilla)

3.7 screen

提供了用户显示屏幕的相关属性,比如显示屏幕的宽度、高度,可用宽度、高度。

screen的属性

  • screen.width 显示屏的宽度
  • screen.height 显示屏的高度

screen.width / screen.height是显示屏的宽高;

window.innerWidth / window.innerHeight 是视窗的宽高;

1
2
3
4
console.log("width: " + window.innerWidth);
console.log("height: "+ window.innerHeight);
console.log("screeW:" + screen.width);
console.log("screeH:" + screen.height);

我们可以测试一下这两组值的区别:

image-20180904142208975

直接最大化打开html文件,我们可以看到视窗宽度和屏幕宽度相同,高度略有差异(因为工具栏等会占一定宽度),我们将浏览器窗口调小再测试:

image-20180904142320510

可以看到屏幕宽高是不会随着浏览器的放大缩小而改变的,即屏幕设备大小是一个客观存在的值,除非更换设备,否则这个值是固定的。

  • screen.availWidth 屏幕的可用宽度
  • screen.availHeight 屏幕的可用高度

屏幕的可用宽高即屏幕宽高减去如工具栏的值.

1
2
3
4
console.log("swidth: " + screen.width);
console.log("sheight: "+ screen.height);
console.log("availW:" + screen.availWidth);
console.log("availH:" + screen.availHeight);

我们可以看看这两组值的差别:

Chrome:

image-20180904142914962

Safari:

image-20180904142943424

我试着将mac中的launchbar调矮了一些,测试结果随之变化:

image-20180904143146888

在mac中,可用高度就是屏幕高度减去顶部工具栏和底部launchbar的高度(前提是launchbar在底部),如果launchbar在左右两侧,那么可用宽度就会是屏幕宽度减去launchbar宽度的值。

4. 前端弹窗

JavaScript有三种形式的弹窗:

1. Alert box

当你需要确保某个信息传递给用户时,使用Alert box。

Alert box弹出时,用户需要点击”OK”或者”确定”来继续下一个步骤。

1
alert("I am an alert box!");

image-20180904144646394

2. Confirm box

当你需要用户验证或者接受某个信息时,使用confirm box。

confirm box弹出时,用户需要点击”确定”或”取消”来继续下一个步骤。

1
window.confirm("Press this confirm button");

image-20180904145009079

3. Prompt box

当你希望用户进入页面前,先输入某个信息时,使用prompt box。

prompt box弹出时,用户需要输入一个值,然后点击”确定”或”取消”来继续下一个步骤。如果用户点击确定,prompt box会返回用户输入的值,如果用户点击取消,prompt box返回null

1
2
3
4
5
6
7
var person = prompt("Please enter your name", "Harry Potter"); // prompt box可以输入默认值

if (person == null || person == "") {
txt = "User cancelled the prompt.";
} else {
txt = "Hello " + person + "! How are you today?";
}

image-20180904145330295

5. 计时事件

window对象运行执行特定的计时事件。JavaScript的两个关键计时事件包括:

  • setTimeout(fn, 毫秒数) 延时执行
  • setInterval(fn, 毫秒数) 循环执行

setTimeout

setTimeout即隔一定时间后将事件加入到异步队列中

取消事件使用clearTimeout

setInterval

即每隔一个间隔时间将事件加入到异步队列

取消该事件使用clearInterval

6. cookies

Cookies用来在网页里存储用户信息。

什么是cookies

当服务器将页面发送给浏览器后,服务器与浏览器之间的连接就断开了,此时,服务器就不会记得关于用户的任何信息(HTTP协议是无状态的)。

发明cookies就是为了解决这个无状态的问题,它被用来“记住”关于用户的信息:

  • 当用户访问页面时,他的名字就被记录在cookie中
  • 当他下一次访问页面时,cookie就记得他的名字

cookies的存储形式就是name-value pairs(类似键值对)

1
username = John Doe

当浏览器向服务器发送网页请求时,对应这个页面的cookies就被加入到请求中,这样服务器就能获取到辨认这个用户所需的信息。

操作cookies的方法

JavaScript可以通过document.cookie属性来创建、读取和删除cookies。

创建cookie

我们可以在控制台中直接通过document.cookie = "username=John Doe";来写入cookie。

写入前:

image-20180904150936635

写入:

image-20180904151037769

写入后:

image-20180904151055500

读取cookie

通过document.cookie可以读取cookie

image-20180904151641027

修改cookie

通过document.cookie重新设置已经设置过的cookie的值即可修改cookie:

image-20180904151907258

image-20180904151923849

删除cookie

删除cookie并不用专门使用特别的方法,只许把cookie的过期时间设置到一个过去的时间点即可。

image-20180904152202364

名称为username的cookie就被删除了

image-20180904152218678