18-BOM对象

飞熊 • 2023年9月9日下午11:25 • 技术随笔 • 阅读 233

一、是什么

🍕🍕🍕BOM (Browser Object Model)，浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象

其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率

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

二、window

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

在浏览器中，window对象有双重角色，即是浏览器窗口的一个接口，又是全局对象

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

var name = 'ttt';
function lookName(){
	alert(this.name);
}
console.log(window.name)
lookName()
window.lookName()

window.open() 既可以导航到一个特定的url，也可以打开一个新的浏览器窗口

如果 window.open() 传递了第二个参数，且该参数是已有窗口或者框架的名称，那么就会在目标窗口加载第一个参数指定的URL

window.open('url','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地址：

在这里插入代码片

location.reload()

可以重新刷新当前页面。这个方法会根据最有效的方式刷新页面，如果页面自上一次请求以来没有改变过，页面就会从浏览器缓存中重新加载

如果要强制从服务器中重新加载，传递一个参数true即可

navigator 对象主要用来获取浏览器的属性，区分浏览器类型。属性较多，且兼容性比较复杂，可以获取定位

history对象主要用来操作浏览器URL的历史记录，可以通过参数向前，向后，或者向指定URL跳转

可接收一个整数数字或字符串参数，向最近的一个记录中包含指定字符串的页面跳转

history.go('http://')

当参数为整数数字的时候，正数表示向前跳转指定的页面，负数为向后跳转指定的页面

history.go(3)
history.go(-1)

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/163301.html