抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

BOM的介绍

JavaScript的组成

JavaScript基础分为三个部分：

  • ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

  • DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

  • BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

什么是BOM

BOM：Browser Object Model，浏览器对象模型。

BOM的结构图：

从上图也可以看出：

  • window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

  • DOM越是BOM的一部分。

window对象：

  • window对象是JavaScript中的顶级对象。

  • 全局变量、自定义函数也是window对象的属性和方法。

  • window对象下的属性和方法调用时，可以省略window。

下面讲一下 BOM 的常见内置方法和内置对象。

弹出系统对话框

比如说，alert(1)是window.alert(1)的简写，因为它是window的子方法。

系统对话框有三种：

1
2
3
4
alert();	//不同浏览器中的外观是不一样的
confirm();  //兼容不好
prompt();	//不推荐使用

打开窗口、关闭窗口

1、打开窗口：

1
window.open(url,target,param)

参数解释：

  • url：要打开的地址。

  • target：新窗口的位置。可以是：_blank 、_self、 _parent 父框架。

  • param：新窗口的一些设置。

  • 返回值：新窗口的句柄。

param这个参数，可以填各种各样的参数（），比如：

  • name：新窗口的名称，可以为空

  • features：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。

  • fullscreen= { yes/no/1/0 } 是否全屏，默认no

  • channelmode= { yes/no/1/0 } 是否显示频道栏，默认no

  • toolbar= { yes/no/1/0 } 是否显示工具条，默认no

  • location= { yes/no/1/0 } 是否显示地址栏，默认no。（有的浏览器不一定支持）

  • directories = { yes/no/1/0 } 是否显示转向按钮，默认no

  • status= { yes/no/1/0 } 是否显示窗口状态条，默认no

  • menubar= { yes/no/1/0 } 是否显示菜单，默认no

  • scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes

  • resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no

  • width=number 窗口宽度（像素单位）

  • height=number 窗口高度（像素单位）

  • top=number 窗口离屏幕顶部距离（像素单位）

  • left=number 窗口离屏幕左边距离（像素单位）

各个参数之间用逗号隔开就行，但我们最好是把它们统一放到json里。

2、关闭窗口：window.close()

（1）和（2）的代码举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23