几个实用的BOM属性对象方法什么是Bom Bom是浏览器对象有哪些常用的Bom属性呢一个URL通常由以下几个部分组成

什么是Bom

Bom(Browser Object Model)是浏览器对象模型
提供了独立于内容与浏览器窗口进行交互的对象
使用浏览器对象模型可以实现与HTML的交互
其作用就是跟浏览器做一些交互效果，将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力
比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率

浏览器的全部内容可以看成 DOM ，整个浏览器可以看成 BOM。区别如下

DOM	BOM
`文档对象模型`	`浏览器对象模型`
DOM就是把文档当一个对象来对待	BOM就是把浏览器当一个对象来对待
DOM的顶级对象是`document`	BOM的顶级对象是`window`
DOM主要学习的是`操作页面元素`	BOM学习的是`浏览器窗口交互`的一些对象
DOM是W3C标准规范	BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

有哪些常用的Bom属性

一个URL通常由以下几个部分组成

协议（例如 http：、https：）
域名（例如 www.example.com）
端口（可选，例如：8080）
路径（例如 /page/subpage）
查询参数（可选，例如？param1=value1&param2=value2）
片段标识符（可选，例如 #section）

如果想清楚的了解，可以控制台输出这个看看

BOM的核心对象是window，他表示浏览器的一个实例。在浏览器中， window 对象有双重角色，即是浏览器窗口的一个接口，又是全局对象因此所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法

1. location对象

location 对象存储了当前文档位置（URL）相关的信息，简单地说就是网页地址字符串。

console.log(window.location.herf)  
// 输出：https://juejin.cn/editor/drafts/7481106110972723252?id=5&name=dreamdu>
window.location.herf=""  // 跳转到””

以www.dreamdu.com:8080/dreamdu. php?id=5&name=dreamdu 为例

location.herf--返回或者设置当前文档的完整URL，唯一允许跨域写入的属性，其他属性不允许跨域操作
location.protocol--返回协议，例：http:
location.host -- 返回 URL 中的域名和端口，例：www.dreamdu.com:8080
location.hostname -- 返回 URL 中的域名，例：www.dreamdu.com
location.port -- 返回 URL中的端口部分。例：8080
location.pathname -- 返回文件路径，从根路径/开始。例：/dreamdu
location.search -- 返回URL中的查询字符串，返回包括（？）后面的内容，例：?id=5&name=dreamdu
location.hash -- 返回 URL#后面的内容，如果没有#，返回空字符串，例：''
location. assign() - 设置当前文档的 URL
location.replace()--设置当前文档的URL，并且在 history 对象的地址列表中移除这个 URL location.replace （url）；
location.reload() -- 重载当前页面，这个方法会根据最有效的方式刷新页面，如果页面自上一次请求以来没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器中重新加载，传递一个参数 true即可

2. history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL。

history.go（） -- 前进或后退指定的页面数 history.go （num）
history.back（）-- 后退一页
history.forward（） -- 前进一页
history.length -- 获取历史记录数

3. Navigator 对象

window.navigator对象包含有关浏览器的信息，可以用它来查询一些关于运行当前脚本的应用程序的相关信息

navigator.userAgent -- 只读，返回用户代理头的字符串表示（就是包括浏览器版本信息等的字符串）
navigator.cookieEnabled -- 返回浏览器是否支持（启用）cookie
navigator.appCodeName 只读，任何浏览器中，总是返回 'Gecko'。该属性仅仅是为了保持兼容性
navigator.appName 只读，返回浏览器的官方名称。不要指望该属性返回正确的值
navigator.appVersion 只读，返回一个字符串，表示浏览器的版本。不要指望该属性返回正确的值
navigator.platform 只读，返回一个字符串，表示浏览器的所在系统平台
navigator.product 只读，返回当前浏览器的产品名称（如，"Gecko"）

4. window.open()

window.open() 方法是 JavaScript 中的一个内置方法，用于在浏览器中打开一个新的窗口或标签页。

语法：window.open(url, name, features, replace)

window.open('htttp://www.vue3js.cn','topFrame')
// ==> 
< a href=" " target="topFrame"></ a>

window.open(）会返回新窗口的引用，也就是新窗口的 window 对象

const myWin = window.open('http://www.vue3js.cn','myWin')

window.close(）仅用于通过 window. open(）打开的窗口

新创建的 window 对象有一个 opener 属性，该属性指向打开他的原始窗口对象

参数说明:

url (必选参数)：要打开的 URL 地址。可以是任何有效的 URL，包括 HTTP、HTTPS、FTP 等协议
name (可选参数)：新窗口的名称，默认_blank。可以是任何字符串，有以下几种情况：
- _self：当前窗口中打开
- _blank 或者 不写该参数：新窗口中打开，窗口name为空字符串
- 任何字符串 ：新窗口中打开，窗口name为任何字符串。如果指定的名称已经存在，则会在该窗口中打开该 URL，而不是新建一个窗口。
features （可选参数）：一个逗号分隔的字符串，指定新窗口的一些特性。这个字符串中可以包含以下属性：
- width：窗口的宽度；
- height：窗口的高度；
- top：窗口距离屏幕顶部的距离，默认0；
- left：窗口距离屏幕左侧的距离，默认0；
- menubar：是否显示菜单栏，yes\no；
- toolbar：是否显示工具栏，yes\no；
- location：是否显示地址栏，yes\no；
- status：是否显示状态栏，yes\no；
- resizable：是否允许用户调整窗口大小，yes\no；
- scrollbars：是否显示滚动条，yes\no。
replace （可选参数）：一个布尔值，指定新打开的 URL 是否替换当前页面的历史记录。如果为 true，则新的 URL 会替换当前页面的历史记录，用户点击浏览器的“返回”按钮时会回到上一个页面；如果为 false，则新的 URL 会添加到当前页面的历史记录中，用户点击浏览器的“返回”按钮时会回到上一个 URL。

注意：

由于弹出窗口的滥用已经成为了一个安全问题，现代浏览器通常会默认阻止 window.open() 方法的调用，除非是在用户的交互下触发的。因此，在实际的开发中，我们需要谨慎使用这个方法，避免被浏览器误认为是恶意行为
当指定 features 参数时， width和 height 是必须明确给出值，否则，features 参数将不起作用
features 参数中， width、 height、top、 left是常用的参数。menubar、toolbar、location、status、resizable、scrollbars 参数已经被大部分浏览器弃用（为了更好的用户体验），因此即使进行了相关设置，也不会发生变化

几个实用的BOM属性对象方法