【BOM】深入浅出浏览器对象模型—BOM基础知识详解

目录

一. 什么是BOM

二. window对象

⬛ 在浏览器中有三个角色

⬛ 打开新链接四种方式:

三. history对象

四. location对象

五. navigator

⬛ 总结：BOM知识点提炼

---

【前文回顾】👉 了解HTML DOM常用对象: 对常用元素的简化 *** 作_05 

---

一. 什么是BOM

Browser Object Model —— 浏览器 对象  模型

1. 什么是BOM: 专门 *** 作和访问浏览器窗口和软件信息的一组对象和函数

BOM提供独立于内容而与浏览器窗口进行交互的对象，并由一系列相关的对象构成，且每个对象都提供了很多方法与属性。

2. 何时: 今后只要想获取浏览器软件和窗口相关的信息，都要用BOM

BOM能做什么？BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，d出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能。

3. 问题: BOM没有标准！BOM都有非常严重的兼容性问题，用的越来越少了！

BOM缺乏标准(规范)，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，而BOM最初是Netscape浏览器标准的一部分。每个浏览器提供商都按照自己的想法去扩展它，那么浏览器共有对象就成了事实的标准

4. 包括:

        👨‍✈️ window  🙆‍♂️ history  🙆‍♂️ location  🙆‍♂️ document  🙆‍♂️ navigator  🙆‍♂️ screen 🙆‍♂️ event

         其中，window是最大的一个对象(核心对象)，是大当家，其他都是堂主，分管各自的片区

二. window对象 ⬛ 在浏览器中有三个角色

1. 代替ES标准中的global充当全局作用域

2. 包含了所有原生的js对象和函数: ECMAScript(核心语法)+DOM+BOM

3. 代表当前正在打开的这个浏览器窗口:

         (1). 获得窗口大小: 2组:

         a. 完整窗口大小: window.outerWidth   window.outerHeight

         b. 文档显示区大小: window.innerWidth   window.innerHeight

         (2). window还可以打开和关闭窗口:

         a. 打开新窗口: window.open()

         b. 关闭当前窗口: window.close();

🌐   关于window对象
 

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象作为浏览器的顶级对象，其具有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAscript规定的Global对象。
 

1. window对象是JS访问浏览器窗口的一个接口。每一个子窗口对应的又是一个window对象

2. window对象是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。(在调用的时候可以省略window，一些常见的对话框都属于window对象方法，如alert()，prompt()等)

🌏 扩展: 浏览器三大对话框

1. 输入框: var 输入的内容=prompt("提示信息");
 

2. 警告框: alert("警告信息");
 

3. 确认框: var bool=confirm("提示信息")

⬛ 打开新链接四种方式:

1. 在当前窗口打开新连接, 可后退:

html: target="_self">  

target="_self"是默认，可不写

js: window.open("url", "_self"); 

window.可以去掉 

 window.location.assign("新url")  或  window.location.href="新url" 

window.可以去掉 

2. 在当前窗口打开新连接，禁止后退:

js: location.replace("新url")

3. 在新窗口打开，可打开多个:

html:

js: window.open("url", "_blank");

4. 在新窗口打开，只能打开一个:

html:

js: window.open("url", "自定义的窗口名");

5. 原理:

         (1). 其实在浏览器中打开的每个窗口，在内存中都有一个唯一的名字，我们默认看不到，保存在window.name属性中。

         强调: 因为name是bom中有特殊意义的词，所以我们自己定义变量名或属性名时不能用name作为名称！

         (2). 我们也可以通过a元素的target属性和open()的第二个实参值来修改新打开的窗口的name属性。

         (3). 浏览器中规定，相同名称的窗口，只能打开一个。后打开的会把先打开的覆盖掉！

         (4). 内置的预定义的窗口名:

         a. _self: 获得当前窗口的名称，赋值给新窗口，结果，因为新窗口与旧窗口同名，所以新窗口会覆盖旧窗口。产生的效果就好像是在当前窗口打开的新页面。

         b. _blank: 不指定新窗口名。但是浏览器不会让窗口名空着。为了避免重复，浏览器会自动为新窗口随机生成新窗口名。因为随机的窗口名是不重复的，所以可以打开多个窗口！

6. 示例: 以四种方式打开新链接:

4_open.html

  
    
    
    
  

  
    1. 在当前窗口打开，可后退
    go to tmooc

    go to tmooc
    2. 在当前窗口打开，不可后退
    go to tmooc
    3. 在新窗口打开，可打开多个
    go to tmooc

    go to tmooc
    4. 在新窗口打开，只能打开一个
    go to tmooc

    go to tmooc
  

运行结果：
 

三. history对象

1. 什么是: 专门保存一个窗口打开后，成功访问过的所有url的历史记录数组。

2. 原理：

         (1). 只要当前窗口成功访问了一个url，history就会把这个新的url追加到history数组中保存！

         (2). history对象中有一个"指针"，默认指向最新的url。但是，也可以通过前进、后退来移动指针在history中的位置

         (3). 如果指针当前位置下方有旧url，则可以后退；如果指针当前位置上方有新url，则可以前进。

3. 用程序控制前进后退: history.go(i)

         (1). 前进一步: history.go(1)

         (2). 后退一步: history.go(-1)

               问题: 如果后退一步不管用，可以后退两步history.go(-2)

         (3). 刷新: history.go(0)

4. 示例:用程序实现前进后退:

         (1). 说明:

         a. 先打开9-1_history.html

         b. 先点2，再点3，在同一窗口中先后打开1,2,3三个页面。

             结果: 当前窗口的history对象中就有了三个url历史记录

         c. 补全: 9-1_history.html、9-2_history.html、9-3_history.html中空缺的语句。

         d. 点三个页面中的前进后退链接体会前进后退。

         (2). 示例: 使用history.go()在三个页面间前进后退

         9-1_history.html

	9-1.html
	
		1  
		2  
		3  
	

	
		
		前进一次  
		前进二次  
	

运行结果：

 

         9-2_history.html

	9-2.html
	
		1  
		2  
		3  
	

	
		后退一次  
		前进一次  
	

运行结果：

         9-3_history.html

	9-3.html
	
		1  
		2  
		3  
	

	
		后退二次  
		后退一次  
	

运行结果：

🌏 扩展：href=“JavaScript:;”是啥意思？

就是执行一段空白javascript语句，并且返回的也是空或者false值，把javascript:;加在超链接上就可以防止链接跳转，从而可以给链接的onclick 方法上写自己想执行的代码。

例子：我是一个超级链接

以上例子中，javascript:是表示在触发默认动作时，执行一段JavaScript代码，而 javascript:;表示什么都不执行，这样点击时就没有任何反应。

另：href=“”代表的是什么也不执行，但是用这种，动作发生之后，会刷新页面。

四. location对象

1. 什么是: 专门保存当前地址栏中的url信息，并提供网页跳转 *** 作的对象。

2. 属性: location对象可以分段获得url中各个部分的不同属性

         (1). location.href  获得地址栏中完整的url地址

         (2). location.protocol   协议

         (3). location.host   主机名+端口号

         (4). location.hostname  主机名

         (5). location.port   端口号

         (6). location.pathname  相对路径

pathname属性设置或返回一个URL的路径名。
路径名是一个字符串，该字符串以主机名开头，包含一个初始的“/”，后跟URL的路径。

         (7). location.search  获得?及其之后的查询字符串参数部分

         (8). location.hash    获得#及其之后的锚点地址

         (9). location.origin   获得’?'前边的URL

3. 方法:

         (1). location.replace("新url"): 专门实现在当前窗口打开新连接，并且禁止后退！

         a. 在当前窗口打开新url

         b. 将新url以替换的方式加入history对象中，替换旧url。因为旧url被替换，所以没有后退的余地了！

         (2). location.assign("新url"): 也能实现在当前窗口打开新连接，可以后退。等效于window.open("新url","_self");

         (3). location.reload(): 刷新 等效于history.go(0);

🔹 扩展：window.location.assign(url) 与 window.location.replace(url)的区别

①window.location.assign(url)：加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

②window.location.replace(url)：通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页。

4. 示例: 分别获得当前url的各个部分

10_location.html

 	
  返回顶部
  

运行结果： 

  

五. navigator

1. 什么是: 专门保存浏览器配置信息的对象

2. 问题: navigator很多属性兼容性极差，已经很少使用了！

3. 判断浏览器是否安装了某个插件:

         (1). 浏览器中安装的所有插件的信息都集中保存在navigator.plugins集合中。

         (2). 如何判断浏览器是否安装某个插件？通过插件全名，强行访问

         navigator.plugins["完整插件名称"]!==undefined 说明装了该插件

         (3). 示例: 判断浏览器是否安装了某个插件:

         11_navigator.html

运行结果： 

4. 获取浏览器的名称和版本号: navigator.userAgent

⬛ 总结：BOM知识点提炼

1. window:

(1). 获得窗口大小:

         a. 获得完整窗口大小:

         window.outerWidth和window.outerHeight

         b. 获得文档显示区大小:

         window.innerWidth和window.innerHeight

(2). 打开和关闭窗口:

         window.open()和window.close()

2. 打开新链接4种方式:

(1). 在当前窗口打开，可后退

         a. html: target="_self">

         b. js: window.open("url", "_self");

(2). 在当前窗口打开，禁止后退

         a. js: location.replace("新url")

(3). 在新窗口打开，可同时打开多个

         a. html:

         b. js: window.open("url", "_blank");

(4). 在新窗口打开，只能打开一个

         a. html:

         b. js: window.open("url", "自定义窗口名")

3. history:

(1). 前进: history.go(n)

(2). 后退: history.go(-n)

(3). 刷新: history.go(0)

4. location:

(1). 属性: 分段获得url中各个部分:

         a. location.href  完整url

         b. location.protocol  协议

         c. location.host   主机名+端口号

         d. location.hostname  主机名

         e. location.port   端口号

         f. location.pathname  相对路径

         g. location.search   ?及其之后的查询字符串参数列表

         h. location.hash    #锚点地址

(2). 方法:

         a. 在当前窗口打开，可后退：

         location.assign("新url") 或 location.href="新url"

         b. 在当前窗口打开，禁止后退:

         location.replace("新url")

         c. 刷新: location.reload();

5. navigator

(1). 查看浏览器的名称和版本号: navigator.userAgent

(2). 查看浏览器中安装的插件列表: navigator.plugins

 ​​

如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！