前端架构师之09_JavaScript_BOM

叁歲伎倆 2023-10-16 14:43 37阅读 0赞

### 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() 方法外，还提供了很多弹出对话框和窗口的方法，以及相关的操作属性。

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

所有的属性和方法在常见的浏览器（如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（默认值），表示在浏览历史中创建新的条目。

<table> 
 <thead> 
  <tr> 
   <th>name可选值</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>_blank</code></td> 
   <td>URL加载到一个新的窗口，也是默认值</td> 
  </tr> 
  <tr> 
   <td><code>_parent</code></td> 
   <td>URL加载到父框架</td> 
  </tr> 
  <tr> 
   <td><code>_self</code></td> 
   <td>URL替换当前页面</td> 
  </tr> 
  <tr> 
   <td><code>_top</code></td> 
   <td>URL替换任何可加载的框架集</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>窗口名称</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>specs可选参数</th> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>height</td> 
   <td>Number</td> 
   <td>窗口的高度，最小值为100</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>Number</td> 
   <td>该窗口的左侧位置</td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td>yes|no|1|0</td> 
   <td>是否显示地址字段，默认值是yes</td> 
  </tr> 
  <tr> 
   <td>menubar</td> 
   <td>yes|no|1|0</td> 
   <td>是否显示菜单栏，默认值是yes</td> 
  </tr> 
  <tr> 
   <td>resizable</td> 
   <td>yes|no|1|0</td> 
   <td>是否可调整窗口大小，默认值是yes</td> 
  </tr> 
  <tr> 
   <td>scrollbars</td> 
   <td>yes|no|1|0</td> 
   <td>是否显示滚动条，默认值是yes</td> 
  </tr> 
  <tr> 
   <td>status</td> 
   <td>yes|no|1|0</td> 
   <td>是否要添加一个状态栏，默认值是yes</td> 
  </tr> 
  <tr> 
   <td>titlebar</td> 
   <td>yes|no|1|0</td> 
   <td>是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框，默认值是yes</td> 
  </tr> 
  <tr> 
   <td>toolbar</td> 
   <td>yes|no|1|0</td> 
   <td>是否显示浏览器工具栏，默认值是yes</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>Number</td> 
   <td>窗口的宽度，最小值为100</td> 
  </tr> 
 </tbody> 
</table>

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

#### 2.3 窗口位置和大小 ####

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

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

目前只有 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 对象提供的方法实现在指定时间后执行特定操作，也可以让程序代码每隔一段时间执行一次，实现间歇操作。

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>setTimeout()</td> 
   <td>在指定的毫秒数后调用函数或执行一段代码</td> 
  </tr> 
  <tr> 
   <td>setInterval()</td> 
   <td>按照指定的周期（以毫秒计）来调用函数或执行一段代码</td> 
  </tr> 
  <tr> 
   <td>clearTimeout()</td> 
   <td>取消由setTimeout()方法设置的定时器</td> 
  </tr> 
  <tr> 
   <td>clearInterval()</td> 
   <td>取消由setInterval()设置的定时器</td> 
  </tr> 
 </tbody> 
</table>

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 地址的方法，所有主流的浏览器都支持。

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>assign()</td> 
   <td>载入一个新的文档</td> 
  </tr> 
  <tr> 
   <td>reload()</td> 
   <td>重新载入当前文档</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>用新的文档替换当前文档</td> 
  </tr> 
 </tbody> 
</table>

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

#### 3.2 获取 URL 参数 ####

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

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

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

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

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

#### 3.3 练习作业 ####

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

### 4 history 对象 ###

#### 4.1 历史记录跳转 ####

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

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

<table> 
 <thead> 
  <tr> 
   <th>分类</th> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>length</td> 
   <td>返回历史列表中的网址数</td> 
  </tr> 
  <tr> 
   <td>方法</td> 
   <td>back()</td> 
   <td>加载history列表中的前一个URL</td> 
  </tr> 
  <tr> 
   <td>方法</td> 
   <td>forward()</td> 
   <td>加载history列表中的下一个URL</td> 
  </tr> 
  <tr> 
   <td>方法</td> 
   <td>go()</td> 
   <td>加载history列表中的某个具体页面</td> 
  </tr> 
 </tbody> 
</table>

*  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对象提供了有关浏览器的信息，主流浏览器中存在的属性和方法如下。

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

### 6 screen 对象 ###

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

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

### 7 练习作业 ###

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

### 7 练习作业 ###