js之BOM

红太狼 2022-11-22 12:48 188阅读 0赞

## 1 BOM 的概念 ##

### 1.1 什么是 BOM ###

BOM 全称 Browser Object Model，译为浏览器对象模型。

BOM 是浏览器为 JavaScript 提供的能够对浏览器进行相关操作的 API。

### 1.2 BOM 的作用 ###

1）弹出新浏览器窗口的能力。

2）移动、关闭和更改浏览器窗口大小的能力。

3）可提供WEB浏览器详细信息的导航对象。

4）可提供浏览器载入页面详细信息的本地对象。

5）可提供用户屏幕分辨率详细信息的屏幕对象；

6）支持Cookies。

### 1.3 BOM 对象 ###

浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，一共有 5 个对象：

1）window

2）location

3）history

4）navigator

5）screen

## 2 window 对象 ##

BOM 的核心对象是 window，它表示浏览器的一个实例。

在浏览器中，window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。

所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。

其他的 4 个 BOM 对象也都是 window 的属性。

> **注意：**
> 
> 使用 window 对象的属性或方法的时候，通常可以省略 window。

### 2.1 属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>获取/设置窗口的名称。</td> 
  </tr> 
  <tr> 
   <td>innerWidth</td> 
   <td>获得浏览器窗口的内容区域的宽度。（只读）</td> 
  </tr> 
  <tr> 
   <td>innerHeight</td> 
   <td>获得浏览器窗口的内容区域的高度。（只读）</td> 
  </tr> 
  <tr> 
   <td>document</td> 
   <td>对当前窗口所包含文档对象的引用。（只读）</td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td>获取、设置 location 对象, 或者当前的 URL。</td> 
  </tr> 
  <tr> 
   <td>history</td> 
   <td>对 history 对象的引用。（只读）</td> 
  </tr> 
  <tr> 
   <td>navigator</td> 
   <td>对 navigator 对象的引用。（只读）</td> 
  </tr> 
  <tr> 
   <td>screen</td> 
   <td>对 screen 对象的引用。（只读）</td> 
  </tr> 
 </tbody> 
</table>

### 2.2 方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>方法含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>alert()</td> 
   <td>显示带有一段消息和一个确认按钮的警告框。</td> 
  </tr> 
  <tr> 
   <td>confirm()</td> 
   <td>显示带有一段消息以及确认按钮和取消按钮的对话框。</td> 
  </tr> 
  <tr> 
   <td>prompt()</td> 
   <td>显示可提示用户输入的对话框。</td> 
  </tr> 
  <tr> 
   <td>open()</td> 
   <td>打开一个新的浏览器窗口或查找一个已命名的窗口。<br><code>window.open(strUrl, strWindowName, [strWindowFeatures]);</code></td> 
  </tr> 
  <tr> 
   <td>close()</td> 
   <td>关闭浏览器窗口。只有open() 方法打开的窗口才可以用 close() 关闭。</td> 
  </tr> 
  <tr> 
   <td>print()</td> 
   <td>打印当前窗口的内容。</td> 
  </tr> 
  <tr> 
   <td>scrollTo()</td> 
   <td>滚动到文档中的某个坐标。</td> 
  </tr> 
  <tr> 
   <td>scrollBy()</td> 
   <td>在窗口中按指定的偏移量滚动文档。</td> 
  </tr> 
  <tr> 
   <td>setTimeout()</td> 
   <td>单次定时</td> 
  </tr> 
  <tr> 
   <td>clearTimeout()</td> 
   <td>取消单次定时</td> 
  </tr> 
  <tr> 
   <td>setInterval()</td> 
   <td>多次定时</td> 
  </tr> 
  <tr> 
   <td>clearInterval()</td> 
   <td>取消多次定时</td> 
  </tr> 
 </tbody> 
</table>

### 3.3 打开窗口 ###

window.open('test.html');  //新窗口打开页面
    
    window.open('http://www.atguigu.com', 'myWindowName')； //从指定名字的窗口打开页面
    
    window.open('http://www.atguigu.com', '', 'width=400,height=300');  // 指定打开的窗口大小

### 3.4 页面滚动 ###

滚动到文档中的某个坐标:

window.scrollTo( 0, 1000 );
    
    // 设置滚动行为改为平滑的滚动
    window.scrollTo({ 
        top: 1000, 
        behavior: "smooth" 
    });

在窗口中按指定的偏移量滚动文档:

// 向下滚动一页：
    window.scrollBy(0, window.innerHeight);
    
    // 向上滚动一页：
    window.scrollBy(0, window.innerHeight);
    
    // 平滑滚动
    window.scrollBy({   
      top: 100,
      left: 100,   
      behavior: "smooth" 
    });

### 3.5 定时器 ###

① 单次定时器

设置定时：

// 第一个参数可以传递一个字符串，第二个参数是延迟时间
    setTimeout("alert('Hello world!') ", 1000); 
    
    // 第一个参数也可以传递一个回调函数，这是推荐的用法
    setTimeout(function() { 
     alert("Hello world!"); 
    }, 1000);
    
    // 还可传递更多的参数作为回调函数的参数
    setTimeout(myCallback, 500, 'Parameter 1', 'Parameter 2');

取消定时：

//设置超时调用
    var timeoutId = setTimeout(function() { 
     alert("Hello world!"); 
    }, 1000); 
    //注意：把它取消
    clearTimeout(timeoutId);

② 多次定时器

设置定时：

// 第一个参数可以传递一个字符串，第二个参数是延迟时间
    setInterval ("alert('Hello world!') ", 10000); 
    
    // 第一个参数也可以传递一个回调函数，这是推荐的用法
    setInterval (function() { 
     alert("Hello world!"); 
    }, 10000); 
    IntervalExample01.htm
    
    // 还可传递更多的参数作为回调函数的参数
    setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');

取消定时:

//设置定时
    var invalId = setInterval(function() { 
     alert("Hello world!"); 
    }, 1000); 
    //注意：把它取消
    clearInterval(timeoutId);

## 3 location 对象 ##

location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将 URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。

### 3.1 属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>href</td> 
   <td>返回当前加载页面的完整URL。直接输出 location 也会返回这个值。</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>设置或返回页面使用的协议。通常是&nbsp;<code>http:</code>&nbsp;或&nbsp;<code>https:</code></td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td>返回服务器名称和端口号（如果有）。</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>返回不带端口号的服务器名称。</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>返回URL中指定的端口号。</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>返回URL中的目录和（或）文件名。</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>返回URL的查询字符串。这个字符串以问号开头。</td> 
  </tr> 
  <tr> 
   <td>hash</td> 
   <td>返回URL中的hash（#号后跟零或多个字符）。</td> 
  </tr> 
 </tbody> 
</table>

### 3.2 方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>方法含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>reload()</td> 
   <td>重新加载<br> 如果设置参数 true，表示强制从浏览器加载。</td> 
  </tr> 
  <tr> 
   <td>assign()</td> 
   <td>打开新的页面。</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>打开新的页面替换旧业面，不会产生历史记录。</td> 
  </tr> 
 </tbody> 
</table>

## 4 history 对象 ##

history 对象提供了操作浏览器*会话历史*（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。

### 4.1 属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>length</td> 
   <td>历史记录的数量</td> 
  </tr> 
 </tbody> 
</table>

### 4.2 方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>方法含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>back()</td> 
   <td>后退一步</td> 
  </tr> 
  <tr> 
   <td>forward()</td> 
   <td>前进一步</td> 
  </tr> 
  <tr> 
   <td>go(n)</td> 
   <td>前进或后台 n 步</td> 
  </tr> 
 </tbody> 
</table>

//后退一步
    history.go(-1); 
    //前进一步
    history.go(1); 
    //前进两步
    history.go(2);

## 5 navigator ##

最早由 Netscape Navigator 2.0 引入的 navigator 对象，现在已经成为识别客户端浏览器的事实标准。

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>userAgent</td> 
   <td>用户代理信息，改属性可以用来检测用户所使用的浏览器。</td> 
  </tr> 
 </tbody> 
</table>

## 6 screen ##

screen 对象返回当前渲染窗口中和屏幕有关的属性。

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>返回屏幕宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>返回屏幕高度</td> 
  </tr> 
 </tbody> 
</table>