BOM 是个什么玩意！

旧城等待， 2023-02-16 12:05 26阅读 0赞

## 1.1 概述 ##

### 1.1.1 什么是 BOM ###

BOM(Browser Object Model 即：浏览器对象模型)，描述与浏览器进行交互的方法和接口。  
![在这里插入图片描述][20200609222117525.jpg]

### 1.1.2 BOM 的组成 ###

`Window`：窗口对象，代表整个浏览器窗口，是顶级的对象  
  `Navigator`：浏览器对象，代表浏览器当前的信息  
  `Screen`：显示器屏幕对象，代表用户的屏幕信息  
  `History`：历史记录对象，代表浏览器的历史信息  
  `Location`：地址栏对象，代表浏览器当前的地址信息

## 1.2 Windows 对象 ##

所有浏览器都支持 window 对象，它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性；全局函数是 window 对象的方法；甚至 HTML DOM 的 document 也是 window 对象的属性之一。

### 1.2.1 常用方法 ###

Window对象不需要创建可以直接使用，Window的方法可以直接使用。

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">alert( )</td> 
   <td align="left">弹出警告框</td> 
  </tr> 
  <tr> 
   <td align="left">prompt( )</td> 
   <td align="left">弹出可输入对话框</td> 
  </tr> 
  <tr> 
   <td align="left">confirm( )</td> 
   <td align="left">弹出确认框</td> 
  </tr> 
  <tr> 
   <td align="left">colse( )</td> 
   <td align="left">关闭当前窗口</td> 
  </tr> 
  <tr> 
   <td align="left">open(URL)</td> 
   <td align="left">打开新窗口</td> 
  </tr> 
  <tr> 
   <td align="left">setTimeout(“JS 代码”，time)</td> 
   <td align="left">一次性倒计时</td> 
  </tr> 
  <tr> 
   <td align="left">clearTimeout(id)</td> 
   <td align="left">取消 id 所代表的一次性倒计时</td> 
  </tr> 
  <tr> 
   <td align="left">setInterval(“JS 代码”，time)</td> 
   <td align="left">循环倒计时</td> 
  </tr> 
  <tr> 
   <td align="left">clearInterval(id)</td> 
   <td align="left">取消 id 所代表的循环性倒计时</td> 
  </tr> 
 </tbody> 
</table>

### 1.2.2 属性 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Navigator</td> 
   <td align="left">浏览器对象</td> 
  </tr> 
  <tr> 
   <td align="left">Screen</td> 
   <td align="left">显示器屏幕对象</td> 
  </tr> 
  <tr> 
   <td align="left">History</td> 
   <td align="left">历史记录对象</td> 
  </tr> 
  <tr> 
   <td align="left">Location</td> 
   <td align="left">地址栏对象</td> 
  </tr> 
  <tr> 
   <td align="left">document</td> 
   <td align="left">获取 DOM 对象</td> 
  </tr> 
 </tbody> 
</table>

### 1.2.3 示例 ###

<!DOCTYPE html>
    <html>
    	<body>
    	
    		<script> alert("弹出框"); prompt("输入"); confirm("可以确认"); </script>
    	</body>
    </html>

![在这里插入图片描述][20200609213932757.png]  
![在这里插入图片描述][20200609213957820.png]  
![在这里插入图片描述][20200609214022968.png]

## 1.3 History 对象 ##

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制，只能拿到当前的浏览记录，不能拿到所有的历史记录

### 1.3.1 常用方法 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">back()</td> 
   <td align="left">加载历史记录中的前一个网页</td> 
  </tr> 
  <tr> 
   <td align="left">forward()</td> 
   <td align="left">加载历史记录中的后一个网页</td> 
  </tr> 
  <tr> 
   <td align="left">go(param)</td> 
   <td align="left">加载历史记录中的一个网页， 正数前进，负数后退</td> 
  </tr> 
 </tbody> 
</table>

### 1.3.2 属性 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">length</td> 
   <td align="left">history 中的记录个数</td> 
  </tr> 
 </tbody> 
</table>

### 1.3.3 示例 ###

<!DOCTYPE html>
    <html>
    <body>
    
    <script> alert("history 中的记录个数: " + window.history.length) </script>
    
    </body>
    </html>

![在这里插入图片描述][20200609215453644.png]

## 1.4 Location 对象 ##

代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息。

### 1.4.1 常用方法 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">reload()</td> 
   <td align="left">刷新网页</td> 
  </tr> 
  <tr> 
   <td align="left">assign(URL)</td> 
   <td align="left">跳转到指定的 URL，当前页面会转为新页面内容，可以点击后退返回上一个页面</td> 
  </tr> 
  <tr> 
   <td align="left">replace(URL)</td> 
   <td align="left">通过加载 URL 替换当前窗口页面，前后两个页面共用一个窗口，不能后退返回上一页</td> 
  </tr> 
 </tbody> 
</table>

### 1.4.2 属性 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">hostname</td> 
   <td align="left">返回 web 主机的域名</td> 
  </tr> 
  <tr> 
   <td align="left">pathname</td> 
   <td align="left">返回当前页面的路径和文件名</td> 
  </tr> 
  <tr> 
   <td align="left">port</td> 
   <td align="left">返回 web 主机的端口(80 或 443)</td> 
  </tr> 
  <tr> 
   <td align="left">protocol</td> 
   <td align="left">返回所使用的 web 协议(http 或 https)</td> 
  </tr> 
  <tr> 
   <td align="left">href</td> 
   <td align="left">获取/设置地址</td> 
  </tr> 
 </tbody> 
</table>

### 1.4.3 示例 ###

<!DOCTYPE html>
    <html>
    <body>
    
    <script> alert(location.href) </script>
    
    </body>
    </html>

![在这里插入图片描述][20200609220622980.png]

## 1.5 Navigator 对象 ##

代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器。

## 1.5.1 属性 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">appCodeName</td> 
   <td align="left">浏览器代号</td> 
  </tr> 
  <tr> 
   <td align="left">appName</td> 
   <td align="left">浏览器名称</td> 
  </tr> 
  <tr> 
   <td align="left">appVersion</td> 
   <td align="left">浏览器版本</td> 
  </tr> 
  <tr> 
   <td align="left">cookieEnabled</td> 
   <td align="left">启用Cookies</td> 
  </tr> 
  <tr> 
   <td align="left">platform</td> 
   <td align="left">硬件平台</td> 
  </tr> 
  <tr> 
   <td align="left">userAgent</td> 
   <td align="left">用户代理</td> 
  </tr> 
  <tr> 
   <td align="left">systemLanguage</td> 
   <td align="left">用户代理语言</td> 
  </tr> 
 </tbody> 
</table>

### 1.5.2 示例 ###

<!DOCTYPE html>
    <html>
    <body>
    
    
    <script> alert("用户代理: " + navigator.userAgent) </script>
    
    </body>
    </html>

![在这里插入图片描述][20200609221110180.png]

注意  
 来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：  
  ♞ navigator 数据可被浏览器使用者更改  
  ♞ 一些浏览器对测试站点会识别错误  
  ♞ 浏览器无法报告晚于浏览器发布的新操作系统

## 1.6 Screen 对象 ##

用户的屏幕信息

### 1.6.1 属性 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">availWidth</td> 
   <td align="left">可用的屏幕宽度</td> 
  </tr> 
  <tr> 
   <td align="left">availHeight</td> 
   <td align="left">可用的屏幕高度</td> 
  </tr> 
 </tbody> 
</table>

### 1.6.2 示例 ###

<!DOCTYPE html>
    <html>
    <body>
    
    
    <script> alert("屏幕宽度: " + screen.availWidth + "\n屏幕高度: " + screen.availHeight) </script>
    
    </body>
    </html>

![在这里插入图片描述][20200609221640196.png]

--------------------

关注公众号一起学习 Java 开发，跟大家分享我的学习成长过程

![在这里插入图片描述][2020060821282046.jpg_pic_center]

[20200609222117525.jpg]: https://img-blog.csdnimg.cn/20200609222117525.jpg
[20200609213932757.png]: https://img-blog.csdnimg.cn/20200609213932757.png
[20200609213957820.png]: https://img-blog.csdnimg.cn/20200609213957820.png
[20200609214022968.png]: https://img-blog.csdnimg.cn/20200609214022968.png
[20200609215453644.png]: https://img-blog.csdnimg.cn/20200609215453644.png
[20200609220622980.png]: https://img-blog.csdnimg.cn/20200609220622980.png
[20200609221110180.png]: https://img-blog.csdnimg.cn/20200609221110180.png
[20200609221640196.png]: https://img-blog.csdnimg.cn/20200609221640196.png
[2020060821282046.jpg_pic_center]: https://img-blog.csdnimg.cn/2020060821282046.jpg#pic_center