《十》JavaScript 中的 BOM

原创已于 2025-03-08 16:30:35 修改 · 432 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Javascript

于 2019-03-13 11:22:34 首次发布

JavaScript 专栏收录该内容

43 篇文章

订阅专栏

本文深入解析了浏览器对象模型(BOM)的概念及其核心组成部分window对象的详细信息，包括其属性、方法和如何通过window对象操作浏览器窗口，如调整大小、位置、打开和关闭窗口，以及使用定时操作。

BOM：Browser Object Model、浏览器对象模型。BOM 提供了独立于内容而与浏览器窗口进行交互的对象，用来访问和操作浏览器窗口。

window 对象：

window 对象表示浏览器中打开的窗口。是 JS 里面最大的最外围的对象，所有 JavaScript 全局对象、函数、一级变量均自动成为 window 对象的成员。

属性：

name：窗口名称。
document：浏览器中加载的页面的文档对象。
location、history、screen、navigator 等。

在应用有 frameset 或者 iframe 的页面，window.self 是对当前窗口自身的引用，window.top 返回顶层窗口，window.parent 返回父窗口。

方法：

window 对象对应着 Web 浏览器的窗口，使用它可以直接对浏览器窗口进行操作。window 对象提供的主要功能分为以下几类：

系统对话框：
- alert(str)：消息对话框，显示 str字符串的内容。
- confirm(str)：确认对话框，显示 str 字符串内容，按确定按钮返回 true，其他操作返回 false。
- prompt(str, value)：输入对话框，采用文本框输入信息。str 为提示信息，value 为初始值。
打开、关闭新窗口：
- open(url, name, config)：打开窗口。url 要打开的新页面的链接；name 窗口的名称；config 窗口的配置参数。
```
//page.html 将在新窗口 newWindow 中打开，宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。
window.open ('page.html','newWindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') 
```
- close()：关闭窗口。
  window.close() 在 Firefox 不能使用，是因为 Firefox 默认不能关闭用户打开的网页。
  解决方案：
  1. 利用 JS 中的 window.open()：火狐必须是 JS 打开的页面，才能用 window.close()关闭。所以可以 window.open(“页面地址”）跳转到当前页面。
  2. 利用 a 标签：在火狐中，在父窗口打开的页面用 window.close() 不能关闭。所以利用 a 标签跳转到这个页面需要 target=”_blank”。
调整窗口的大小和位置等：
- focus()、blur()：窗口获得焦点、失去焦点。
- moveBy()、moveTo()：移动窗口。
- resizeBy()、resizeTo()：调整窗口大小。
- scrollBy()、scrollTo()：滚动窗口中网页的内容。
定时操作：多用于网页动态时钟，制作倒计时，跑马灯效果等。
- setInterval(exp,time)：周期性触发代码，以一定的时间间隔重复执行代码，循环往复。exp 执行语句。 time 时间周期，单位为毫秒。
```
setInterval(alert(‘hello’),3000);
```
- clearInterval(tID)：停止启动的定时器。
```
var timer=setInterval(alert("Hello"), 3000);

clearInterval(timer);
```
- setTimeout(exp,time)：一次性触发代码，在一个设定的时间间隔之后执行代码。
- clearTimeout(tID)：停止启动的计时器。

`setTimeout()` 和 `setInterval()` 的区别：

计时器的计时是独立运行的，不受 JS 线程的影响。

触发时间和执行次数不同： setTimeout() 会在指定的时间间隔之后执行一次回调函数；setInterval() 每隔指定的时间间隔执行一次回调函数。
setTimeout() 和setInterval()中的第二个参数，指定的不是回调函数的执行时间，而是回调函数被加入到任务队列的时间，因此二者都会存在时间误差问题。
setInterval() 的回调函数会按照指定的时间间隔被依次加入到任务队列中，如果前一个回调函数执行时间过长或者主线程被其他任务阻塞，就会导致多个回调函数在队列中堆积，后续它们的执行时间会越来越不准确；可以使用递归使用 setTimeout() 来减小，但也只能减小误差，因为指定的时间时间是它们被放到任务队列的时间，而不是实际执行回调函数的时间。

使用 `setTimeout()` 实现 `setInterval()` ：

// 递归实现 setInterval
setTimeout(function(){
  const executeStartTime = new Date().getTime();
  console.log('setTimeout：' + new Date().toLocaleString());
  const time = new Date().getTime() - executeStartTime;

  setTimeout(arguments.callee, 1000 - time);
}, 1000);

使用 `setInterval()` 实现 `setTimeout()` ：

const timer = setInterval(() => {
  console.log('setInterval：' + new Date().toLocaleString());
  clearInterval(timer);
}, 1000);

location 对象：

location 对象包含了浏览器当前的 URL 地址信息。

属性：

http://127.0.0.1:8020/program/index.html?articleId=848403

href：获取或设置整个 url。http://127.0.0.1:8020/program/index.html?articleId=848403
protocol：获取或设置 url 的协议。http
host：获取或设置 url 的主机名。127.0.0.1:8020
port：获取或设置 url 的端口号。8020
pathname：获取或设置文件的路径。/program/index.html
hash：获取或设置 url 的 # 号及 # 号后面的参数（页面的标签值）。

# 代表页面中的一个位置，其右边的字符，就是该位置的标识符。浏览器读取 url 后，会自动将这个位置滚动至可视区域。
单单改变 # 后面的内容，浏览器只会滚动到相应位置，不会重新加载网页。
每一次改变 # 后面的内容，都会在浏览器的访问历史中增加一个记录，使用后退按钮，就可以回到上一个位置。
# 是用来指导浏览器动作的，对服务器完全无用，所以 HTTP 请求中并不包含 #。只有将 # 转码为 %23，浏览器才会将其作为实义字符处理。
search：获取或设置 url 的 ? 号及 ? 号后面的参数。?articleId=848403

方法：

replace(url)：替换为 url 网页地址。
relode()：重新载入当前网址，同时按下刷新按钮。

JS 刷新当前页面：

location.reload(); 。
在<head>中加入<meta http-equiv="refresh" content="5">，每隔 5 秒自动刷新一次页面。

history 对象：

history 对象包含了浏览器访问的网页的历史信息。

属性：

length：浏览器历史记录的总数。

方法：

back()：等同于单击后退按钮。因为是从浏览器缓存中拿到的页面，所以不会进行页面刷新。
forward()：等同于单击前进按钮。
go(num)：num 为正，等同于单击几次前进按钮；num 为负，等同于单击几次按钮。

navigator 对象：

navigator 对象包含了浏览器本身的信息。

属性：

appName：浏览器名称。
appCodeName：浏览器代码名称。
appVersion：浏览器运行平台和版本。
userAgent：返回当前浏览器的用户代理字符串。

基于用户代理字符串来识别浏览器是不可靠的且不推荐，因为此属性的值在同一浏览器的不同版本中可能是不同的，且用户代理字符串是可以由用户配置的。