2023蓝旭前端第六次讨论班——BOM

嘿0v0

已于 2023-08-02 17:27:45 修改

阅读量181

点赞数 1

分类专栏：前端文章标签：前端 javascript

于 2023-05-07 17:39:06 首次发布

本文链接：https://blog.csdn.net/ordinaryzry/article/details/130545489

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1 BOM 介绍

BOM （Browser Object Moudle 浏览器对象模型），是将使用的浏览器抽象为对象进行处理，其核心对象是 window，BOM 为其中的每个对象都提供了很多方法和属性。
与 DOM 不同，BOM缺乏标准，现在都是浏览器厂商各自在浏览器上定义，兼容器较差。

2 BOM 对象

2.1 window 对象

BOM 的核心是 window 对象，表示浏览器的实例。
window 对象在浏览器中有两重身份，一个是 ECMAScript 中的 Global 对象，另一个就是浏览器窗口的JavaScript 接口。

2.1.1 Global 对象

因为 window 对象被复用为 ECMAScript 的Global 对象，所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。

var : 声明全局变量
let : 声明局部变量
const : 声明只读变量

// var 声明时变量能够在控制台正常输出
var age = 18;
var sayAge = function () { console.log(this.age); }
console.log(window.age); // 18
sayAge(); // 18
window.sayAge(); // 18

// 使用let和const声明时，不会把变量添加给全局对象
let age = 18;
const sayAge = function () { console.log(this.age); }
console.log(window.age); // undefined
sayAge(); // undefined
window.sayAge(); // peError: window.sayAge is not a function

全局变量与在 window 对象上直接定义属性的区别

1、全局变量不能通过 delete 操作符删除；而 window 属性上定义的变量可以通过 delete 删除

var num = 123;
window.str = "string";
delete num;
delete str;
console.log(num); //123
console.log(str); //str is not defined

2、访问未声明的变量会抛出错误，但是通过属性查询在 window 对象上查询就不会抛出错误，会返回undefined 。

// 这会导致抛出错误，因为oldValue 没有声明
var newValue = oldValue;
// 这不会抛出错误，因为这里是属性查询
// newValue 会被设置为undefined
var newValue = window.oldValue;
console.log(newValue);

2.1.2 窗口关系

在应用有 frameset 或者 iframe 的页面时，

top
始终指向最上层（最外层）窗口，即浏览器窗口本身。
parent
始终指向当前窗口的父窗口。
如果当前窗口是最上层窗口，则parent 等于top（都等于window）。
self
终极 window 属性，始终指向 window，实际上self和window就是同一个对象。

这些属性都是 window 对象的属性，因此访问 window.parent、window.top 和 window.self 都可以。
这意味着可以把访问多个窗口的 window 对象串联起来，比如 window.parent.parent。

2.1.3 窗口位置

screenLeft，screenTop
用于表示窗口相对于屏幕左侧和顶部的位置，IE、Safari 和 Opera 支持使用
screenX，screenY
用于表示窗口相对于屏幕左侧和顶部的位置，Firefox 和 Safari 支持使用

窗口位置移动

moveTo(x,y) 要移动到的新位置的绝对坐标 x 和 y
moveBy(x,y) 相对当前位置在两个方向上移动的像素数 x 和 y

移动窗口的方法可能会被浏览器禁用，且只能应用到最上层的 window 对象。

2.1.4 窗口大小

outerWidth，outerHeight
返回浏览器自身窗口大小
innerWidth，innerHeight
返回页面视口大小，不包括浏览器的边框和工具栏【只能在IE9以及IE9以上的浏览器中才能获取】
document.documentElement.clientWidth，document.documentElement.clientHeight
返回页面视口大小【在IE9以下的浏览器的标准模式中获取】

获取网页宽高

function getScreen() { //获取网页宽高的兼容性方法
	let width, height;
	if(window.innerWidth){ // IE9以及IE9以上的浏览器中
        width = window.innerWidth;
        height = window.innerHeight;
    }else if(document.compatMode === "BackCompat"){ //IE9以下的浏览器的混杂模式中
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }else{ // IE9以下的浏览器的标准模式中
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    }
    return{
        width:width,
        height:height
    };
}

元素宽高

offset
offsetWidth / offsetHeight ：获取的宽高包含边框 + 内边距 + 元素宽高
offsetLeft /offsetTop ：获取元素到第一个定位元素的偏移量，如果没有定位的则获取到的是到body的偏移量

client
clientWidth / clientHeight ：获取的宽高包含内边距 + 元素宽高
clientLeft /clientHeight ：获取元素的左边框或者顶部边框

scroll
scrollWidth / scrollHeight ：当内容没超出元素范围时获取的是内边框 + 元素宽高
当内容超出元素范围时获取的是内边框 + 元素宽高+超出的宽度
scrollTop / scrollLeft ：Top获取的是内容超出顶部内边距的距离 Left获取的是内容超出左边内边距的距离

调整窗口大小

resizeTo(w,h) 新的宽度和高度的值
resizeBy(w,h) 宽度和高度各要缩放多少

// 缩放到100×100
window.resizeTo(100, 100);
// 缩放到200×150
window.resizeBy(100, 50);

缩放窗口的方法可能会被浏览器禁用，且只能应用到最上层的 window 对象。

2.1.5 滚动距离

浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限的视口中查看页面。

window.pageXoffset / window.scrollX
页面左侧距离视口左侧的距离
window.pageYoffset / window.scrollY
页面顶部距离视口顶部的距离

获取网页滚动距离

function getPageScroll() { //获取网页滚动距离的兼容性方法
    let x, y;
    if(window.pageXOffset){ // IE9以及IE9以上的浏览器中
        x = window.pageXOffset;
        y = window.pageYOffset;
    }else if(document.compatMode === "BackCompat"){ //IE9以下的浏览器的混杂模式中
        x = document.body.scrollLeft;
        y = document.body.scrollTop;
    }else{ // IE9以下的浏览器的标准模式中
        x = document.documentElement.scrollLeft;
        y = document.documentElement.scrollTop;
    }
    return {
        x: x,
        y: y
    };
}

调整滚动距离

scroll(x,y) 要滚动到的坐标 x 和 y
scrollTo(x,y) 要滚动到的坐标 x 和 y
scrollBy(x,y) 滚动的距离 x 和 y

其中，还可以通过 behavior 属性选择是否平滑滚动。

// 滚动到页面左上角
window.scrollTo(0, 0);
// 滚动到距离屏幕左边及顶边各100 像素的位置
window.scrollTo(100, 100);
// 相对于当前视口向下滚动100 像素
window.scrollBy(0, 100);
// 相对于当前视口向右滚动40 像素
window.scrollBy(40, 0);

// 正常滚动 即快速跳转
window.scrollTo({
	left: 100,
	top: 100,
	behavior: 'auto'
});

// 平滑滚动 即慢慢滚动
window.scrollTo({
	left: 100,
	top: 100,
	behavior: 'smooth'
});

2.1.6 打开新窗口

window.open() 方法可以用于导航到指定URL，也可以用于打开新浏览器窗口。
这个方法接收4个参数：要加载的URL、目标窗口（name）、特性字符串（specs）和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值（replace）。

URL 打开指定的页面的URL。
如果没有指定URL，打开一个新的空白窗口。
name 指定target属性或窗口的名称。
_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称

specs 一个逗号分隔的项目列表。
有channelmode、directories、fullscreen、height、left、location、menubar、resizable、scrollbars、status、titlebar、toolbar、top、width这些属性
replace 在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。

2.1.7 定时器

周期性定时器

让程序按指定时间间隔反复自动执行一项任务【反复执行】

setInterval(exp,time)——周期性触发代码exp

exp：执行语句
time：时间周期，单位为毫秒

setInterval(function(){
    console.log("hello");
},1000);

停止定时器

var timer=setInterval(function(){
    console.log("hello");
},1000);//命名定时器；
clearInterval(timer);//停止定时器

一次性定时器

让程序延迟一段时间执行【只执行一次】

setTimeout(exp,time)——一次性触发代码exp

exp：执行语句
time：间隔时间，单位为毫秒

setTimeout(function(){
    alert("时间到！");
},60000);

停止定时器
只要是在指定时间到达之前调用 clearTimeout() ，就可以取消由 setTimeoutl() 设置的定时器，在任务执行后再调用 clearTimeout() 没有效果

var timer=setTimeout(function(){
    alert("时间到！");
},60000);//命名定时器；
clearTimeout(timer);//停止定时器

2.1.8 对话框

alert() 警告框
confirm() 确认框
prompt() 对话提示框

注意：系统对话框样式单一，且适用场景有限，不建议使用，可自定义弹窗

2.2 location 对象

location 提供了当前窗口中加载文档的信息，以及通常的导航功能。
它既是window 的属性，也是document 的属性。也就是说， window.location 和 document.location 指向同一个对象。
location 对象不仅保存着当前加载文档的信息，也保存着把URL 解析为离散片段后能够通过属性访问的信息。

URL中符号的作用：网址后面用?/&等符号引导的语句有什么功能？

/ 相对路径
？ 路径与参数分隔符
& 参数之间的分隔符

location.href 获取或设置整个URL
location.assign（url）可以跳转页面，可以后退页面
同 window.location = “url”; 和 location.href = “url”;
location.replace（url）替换当前页面，不能后退页面
location.reload（）重新加载页面，相当于刷新
location.reload(true) 重新加载，从服务器加载
location.host 返回主机/域名
location.port 返回端口号，如果没有返回空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段，#后面内容常见于锚点，链接

2.3 navigator 对象

navigator 对象包含有关浏览器的信息，是客户端标识浏览器的标准。
只要浏览器启用 JavaScript ，navigator 对象就一定存在。
但是与其他BOM对象一样，每个浏览器都支持自己的属性。
navigator 对象的属性通常用于确定浏览器的类型。

navigator.plugins 集合是一个 Plugin 对象的数组，其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息，其中包括它所支持的 MIME 类型的列表。
可用于检测插件。

更多关于 navigator 对象的内容

2.4 screen 对象

window 的另一个属性 screen 对象，包含有关客户端显示屏幕的信息，是为数不多的几个在编程中很少用的 JavaScript 对象。
这个对象中保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度。
每个浏览器都会在 screen 对象上暴露不同的属性。

更多关于 screen 对象的内容

2.5 history 对象

history 对象表示当前窗口首次使用以来用户的导航历史记录。
因为 history 是 window 的属性，所以每个 window 都有自己的 history 对象。
出于安全考虑，这个对象不会暴露用户访问过的URL，但可以通过它在不知道实际URL 的情况下前进和后退。

go()
可以在用户历史记录中沿任何方向导航，可以前进也可以后退。
接收一个整数参数，表示前进或后退多少步【负值表示后退，正值表示前进】。
在旧版本的一些浏览器中，go() 方法的参数也可以是一个字符串。
这种情况下浏览器会导航到历史中包含该字符串的第一个位置。
最接近的位置可能涉及后退，也可能涉及前进。
如果历史记录中没有匹配的项，则这个方法什么也不做。
```
// 导航到最近的 bluemsun.top 页面
history.go("bluemsun.top");
```
back()
表示页面后退一页。
foward()
表示页面前进一页。
history.length
表示历史记录中有多个条目，包括可以前进和后退的页面。
对于窗口或标签页中加载的第一个页面，history.length 等于1。可以通过这个确定用户浏览器的起点是不是你的页面。