前端架构师之09_JavaScript_BOM

1 什么是 BOM 对象

BOM:Brower Object Model,指的是浏览器对象模型。

BOM 用来操作浏览器窗口及窗口上的控件,实现用户和页面的动态交互。

浏览器对象:浏览器提供的一系列内置对象的统称。

BOM 浏览器对象模型:各内置对象之间按照某种层次组织起来的模型的统称。

window 对象是 BOM 的顶层(核心)对象。其他的对象都是以属性的方式添加到 window 对象下,也可称为 window 的子对象。

  • document(文档对象):
  • history(历史对象):主要用于记录浏览器的访问历史记录,也就是浏览网页的前进与后退功能。
  • location(地址栏对象):用于获取当前浏览器中URL地址栏内的相关数据。
  • navigator(浏览器对象):用于获取浏览器的相关数据,例如浏览器的名称、版本等,也称为浏览器的嗅探器。
  • screen(屏幕对象):可获取与屏幕相关的数据,例如屏幕的分辨率等。

BOM 没有一个明确的规范,所以浏览器提供商会按照各自的想法随意去扩展 BOM。而各浏览器间共有的对象就成为了事实上的标准。不过在利用 BOM 实现具体功能时要根据实际的开发情况考虑浏览器之间的兼容问题,否则会出现不可预料的情况。

2 window 对象

2.1 全局作用域

window 对象是BOM中所有对象的核心,同时也是BOM中所有对象的父对象。

定义在全局作用域中的变量、函数以及 JavaScript 中的内置函数都可以被 window 对象调用。

var area = 'Beijing';
function getArea(){
    return this.area;
}
console.log(area);
console.log(window.area);
console.log(getArea());
console.log(window.getArea());
console.log(window.Number(area));
  • 定义在全局作用域中的 getArea() 函数,函数体内的 this 关键字指向 window 对象。
  • 对于 window对象的属性和方法在调用时可以省略 window,直接访问其属性和方法即可。

在 JavaScript 中直接使用一个未声明的变量会报语法错误,但是使用“window.变量名”的方式则不会报错,而是获得一个 undefined 结果。

除此之外,delete 关键字仅能删除 window 对象自身的属性,对于定义在全局作用域下的变量不起作用。

2.2 弹出对话框和窗口

window 对象中除了前面提过的 alert() 和 prompt() 方法外,还提供了很多弹出对话框和窗口的方法,以及相关的操作属性。

分类 名称 说明
属性 closed 返回一个布尔值,该值声明了窗口是否已经关闭
属性 name 设置或返回存放窗口名称的一个字符串
属性 opener 返回对创建该窗口的window对象的引用
属性 parent 返回当前窗口的父窗口
属性 self 对当前窗口的引用,等价于window属性
属性 top 返回最顶层的父窗口
方法 alert() 显示带有一段消息和一个确认按钮的警告框
方法 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
方法 prompt() 显示可提示用户输入的对话框
方法 open() 打开一个新的浏览器窗口或查找一个已命名的窗口
方法 close() 关闭浏览器窗口
方法 focus() 把键盘焦点给予一个窗口
方法 print() 打印当前窗口的内容
方法 scrollBy() 按照指定的像素值来滚动内容
方法 scrollTo() 把内容滚动到指定的坐标

所有的属性和方法在常见的浏览器(如IE、Chrome等)中全部支持。

prompt() 方法

作用:用于生成用户输入的对话框。

第1个参数:用于设置用户输入的提示信息。

第2个参数:用于设置输入框中的默认信息。

prompt('请输入测试的选项');
prompt('请输入测试的选项', '用户名和密码');
confirm() 方法

作用:弹出一个确认对话框,该对话框中包含提示消息以及确认和取消按钮。

参数:用于设置确认的提示信息。

返回值:点击“确定”按钮,返回true。点击“取消”按钮,返回false。

confirm('确定要删除吗?')
open() 方法

作用:用于打开一个新的浏览器窗口,或查找一个已命名的窗口。

语法:open(URL, name, specs, replace)。

  • 第1个参数:打开指定页面的URL地址,若没有指定,则打开一个新的空白窗口。
  • 第2个参数:指定target属性或窗口的名称
  • 第3个参数:用于设置浏览器窗口的特征(如大小、位置、滚动条等),多个特征之间使用逗号分隔。
  • 第4个参数:设置为true,表示替换浏览历史中的当前条目,设置false(默认值),表示在浏览历史中创建新的条目。
name可选值 含义
_blank URL加载到一个新的窗口,也是默认值
_parent URL加载到父框架
_self URL替换当前页面
_top URL替换任何可加载的框架集
name 窗口名称
specs可选参数 说明
height Number 窗口的高度,最小值为100
left 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
width Number 窗口的宽度,最小值为100

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

2.3 窗口位置和大小

BOM 中用来获取或更改 window 窗口位置,窗口高度与宽度,文档区域高度与宽度的相关属性和方法有很多。

分类 名称 说明
属性 screenLeft 返回相对于屏幕窗口的x坐标(Firefox不支持)
属性 screenTop 返回相对于屏幕窗口的y坐标(Firefox不支持)
属性 screenX 返回相对于屏幕窗口的x坐标(IE8不支持)
属性 screenY 返回相对于屏幕窗口的y坐标(IE8不支持)
属性 innerHeight 返回窗口的文档显示区的高度(IE8不支持)
属性 innerWidth 返回窗口的文档显示区的宽度(IE8不支持)
属性 outerHeight 返回窗口的外部高度,包含工具条与滚动条(IE8不支持)
属性 outerWidth 返回窗口的外部宽度,包含工具条与滚动条(IE8不支持)
方法 moveBy() 将窗口移动到相对的位置
方法 moveTo() 将窗口移动到指定的位置
方法 resizeBy() 将窗口大小调整到相对的宽度和高度
方法 resizeTo() 将窗口大小调整到指定的宽度和高度

目前只有 window.open() 方法打开的的窗口和选项卡(Tab),FireFox和Chrome浏览器才支持口位置和大小的调整。

2.4 框架操作

window 对象提供的 frames 属性可通过集合的方式,获取 HTML 页面中所有的框架,length 属性就可以获取当前窗口中 frames 的数量。

<body>
    
    <iframe name="frame01">iframe>
    <iframe name="frame02">iframe>
    <iframe name="frame03">iframe>
body>
<script>
    // 获取窗口对应给定对象的内容
    // 方式1:
    window.frames['frame01'].document.write('frame01 text.');
    // 方式2:
    window.frames.frame02.document.write('frame02 text.');
    // 方式3:
    window.frames[2].document.write('frame03 text.');
script>

除此之外,还可以利用 parent 获取当前 window 对象所在的父窗口。

window.parent;         // 如果在框架中,获取父级窗口,否则返回自身引用
window.parent.frames;  // 获取同级别的框架

2.5 定时器

JavaScript 中可通过 window 对象提供的方法实现在指定时间后执行特定操作,也可以让程序代码每隔一段时间执行一次,实现间歇操作。

方法 说明
setTimeout() 在指定的毫秒数后调用函数或执行一段代码
setInterval() 按照指定的周期(以毫秒计)来调用函数或执行一段代码
clearTimeout() 取消由setTimeout()方法设置的定时器
clearInterval() 取消由setInterval()设置的定时器

setTimeout() 和 setInterval() 方法区别:

  • 相同点:都可以在一个固定时间段内执行 JavaScript 程序代码。
  • 不同点:setTimeout() 只执行一次代码,setInterval() 会在指定的时间后,自动重复执行代码。
// 只执行一次代码
setTimeout(echoStr, 3000);
function echoStr() {
    console.log('JavaScript');
}
// 重复执行代码
setInterval(echoStr, 3000);
function echoStr() {
    console.log('JavaScript');
}
  • setTimeout() 方法在执行一次后即停止了操作;setInterval() 方法一旦开始执行,在不加干涉的情况下,间歇调用将会一直执行到页面关闭为止。
  • 若要在定时器启动后,取消该操作,可以将 setTimeout() 的返回值(定时器ID)传递给 clearTimeout() 方法;或将 setInterval() 的返回值传递给 clearInterval() 方法。

2.6 练习作业

  • 限时秒杀
    • 指定限时秒杀的结束时间,及其对应的毫秒数。
    • 获取当前时间的毫秒数。
    • 计算当前与秒杀结束的时间差,大于0,计算剩余的天时分秒;否则结束秒杀。
    • 利用定时器完成秒杀的倒计时功能。
    • 利用两位数字显示秒杀的时间。

3 location 对象

3.1 更改 URL

URL:Uniform Resource Locator,统一资源定位符。

在 Internet 上访问的每一个网页文件,都有一个访问标记符,用于唯一标识它的访问位置,以便浏览器可以访问到,这个访问标记符称为URL。

// http://www.example.com:80/web/index.html?a=3&b=4#res
// http 传输数据所使用的协议
// www.example.com 服务器主机名
// 80 端口号
// /web/index.html 要请求的资源
// a=3&b=4 用户传递的参数
// #res 页面内部的锚点

// 由于80是Web服务器的默认端口号,因此可以省略URL中的“:80”
// 即:http://www.example.com/web/index.html?a=3&b=4#res

location 对象提供的用于改变 URL 地址的方法,所有主流的浏览器都支持。

名称 说明
assign() 载入一个新的文档
reload() 重新载入当前文档
replace() 用新的文档替换当前文档

reload() 方法的唯一参数,是一个布尔类型值,将其设置为 true 时,它会绕过缓存,从服务器上重新下载该文档,类似于浏览器中的刷新页面按钮。

3.2 获取 URL 参数

Web开发中,经常通过URL地址传递的参数执行指定的操作,如商品的搜索,排序等。此时,可以利用location对象提供的search属性返回URL地址中的参数。

  • 用户访问该URL地址。
  • 获取带有?的请求参数。

获取URL的指定部分:location.属性名。

设置URL的指定部分:location.属性名 = 值。

属性 说明
hash 返回一个URL的锚部分
host 返回一个URL的主机名和端口
hostname 返回URL的主机名
href 返回完整的URL
pathname 返回URL的路径名
port 返回一个URL服务器使用的端口号
protocol 返回一个URL协议

3.3 练习作业

  • 定时跳转
    • 编写定时跳转的HTML页面。
    • 获取指定的秒数,并减1写入页面。
    • 当秒数大于0时,利用 setTimeout() 循环倒计时。
    • 当秒数小于等于0时,利用 location.href 跳转到指定的URL地址中。

4 history 对象

4.1 历史记录跳转

history对象可对用户在浏览器中访问过的URL历史记录进行操作。

出于安全方面的考虑,history对象不能直接获取用户浏览过的URL,但可以控制浏览器实现“后退”和“前进”的功能。

分类 名称 说明
属性 length 返回历史列表中的网址数
方法 back() 加载history列表中的前一个URL
方法 forward() 加载history列表中的下一个URL
方法 go() 加载history列表中的某个具体页面
  • go()方法可根据参数的不同设置,完成历史记录的任意跳转。当参数值是一个负整数时,表示“后退”指定的页数;当参数值是一个正整数时,表示“前进”指定的页数。
  • 当go()方法的参数为1或-1时,与forward()和back()方法的作用相同。

4.2 无刷新更改 URL 地址

HTML5为history对象引入了history.pushState()和history.replaceState()方法,用来在浏览历史中添加和修改记录,实现无刷新更改URL地址。

pushState(state, title, [url])     // 添加历史记录
replaceState(state, title, [url])  // 修改历史记录
  • 参数state:表示一个与指定网址相关的状态对象,此处可以填null或空字符串。
  • 参数title:表示新页面的标题,可以填null或空字符串。
  • 参数url:表示新的网址,并且必须与当前页面处在同一个域中。
history.pushState(null, null, "?a=check");
history.pushState(null, null, "?a=login");
history.replaceState(null, null, "?p=1");
  • pushState()方法会改变浏览器的历史列表中记录的数量。
  • replaceState()方法仅用于修改历史记录,历史记录列表的数量不变,与location.replace()方法的功能类似。

5 navigator 对象

navigator对象提供了有关浏览器的信息,主流浏览器中存在的属性和方法如下。

分类 名称 说明
属性 appCodeName 返回浏览器的内部名称
属性 appName 返回浏览器的名称
属性 appVersion 返回浏览器的平台和版本信息
属性 cookieEnabled 返回指明浏览器中是否启用cookie的布尔值
属性 platform 返回运行浏览器的操作系统平台
属性 userAgent 返回由客户端发送服务器的User-Agent头部的值
方法 javaEnabled() 指定是否在浏览器中启用Java

6 screen 对象

screen对象用于返回当前渲染窗口中与屏幕相关的属性信息,如屏幕的宽度和高度等。以下展示主流浏览器中支持的screen属性。

名称 说明
height 返回整个屏幕的高
width 返回整个屏幕的宽
availHeight 返回浏览器窗口在屏幕上可占用的垂直空间
availWidth 返回浏览器窗口在屏幕上可占用的水平空间
colorDepth 返回屏幕的颜色深度
pixelDepth 返回屏幕的位深度/色彩深度

7 练习作业

  • 红绿灯倒计时
    • 横向三色交通信号灯的亮灯的顺序一般为“绿->黄->红->绿”依次循环。
    • 亮灯时长需根据路口的实际情况等因素来考虑设置,如红灯亮设置为30秒,绿灯亮设置为35秒,黄灯亮设置为5秒。
    • 编写HTML,设置红黄绿灯及倒计时的显示页面。
    • 创建红、黄、绿灯对象lamp,保存相关的数据。
    • 创建倒计时的元素对象count,实现倒计时的时间设置。
    • 根据lamp和count对象获取并设置绿灯亮时页面初始化效果。
    • 利用setInterval()函数完成信号灯倒计时的动态改变效果。
      水平空间 |
      | colorDepth | 返回屏幕的颜色深度 |
      | pixelDepth | 返回屏幕的位深度/色彩深度 |

7 练习作业

  • 红绿灯倒计时
    • 横向三色交通信号灯的亮灯的顺序一般为“绿->黄->红->绿”依次循环。
    • 亮灯时长需根据路口的实际情况等因素来考虑设置,如红灯亮设置为30秒,绿灯亮设置为35秒,黄灯亮设置为5秒。
    • 编写HTML,设置红黄绿灯及倒计时的显示页面。
    • 创建红、黄、绿灯对象lamp,保存相关的数据。
    • 创建倒计时的元素对象count,实现倒计时的时间设置。
    • 根据lamp和count对象获取并设置绿灯亮时页面初始化效果。
    • 利用setInterval()函数完成信号灯倒计时的动态改变效果。

你可能感兴趣的:(前端技术,前端,javascript,开发语言)