前端复习之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有一个核心对象window，window对象包含了6大核心模块，分别是：

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

img

3.1 window对象

BOM的核心对象就是window，window对象也是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

    返回浏览器窗口的宽度

注意：

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

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

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

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，innerWidth和innerHeight并不兼容，需要使用：

  • 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