BOM学习

Posted 2023-02-28 做枚温婉的妹纸吧哈哈

window对象

window对象充当浏览器中的global对象。所有全局声明的变量和函数都自动归为window对象的属性和方法。但这样的属性不能通过delete 删除，除非显示地声明成window的属性：

window.XXX

此外，访问未声明的变量会报错，但是访问不存在的属性就不会，只会返回undefined ，因此，可通过window.xxx 来判断某个全局变量是否声明了。

frame

每一个框架都有自己的window对象。在最顶层（即浏览器）window对象中，有个属性frames，是一个数组，包含了浏览器中的框架。可通过下标或者框架的name 属性值来引用该框架。
top对象指向最顶层框架，即浏览器窗口，通常用top来对页面上的框架进行访问：

top.frames['frameName'];
top.frames[0]

每个框架中还有一个对象parent指向其直接的父级框架。
self 指向框架内部的window 对象。

对于每个框架，window.name就是frame的name属性。

窗口位置

通过以下属性可以获得窗口的位置：

window.screenLeft
window.screenTop
window.screenX
window.screenY

不同的浏览器对于window.screenTop、window.screenY 的解析是不一样的。

窗口大小

window.outWidth
window.outHeight
window.innerWidth
window.innerHeight

在IE9+提供以上四种接口。不同浏览器对这outer类型的值解析不同。有的是整个浏览器窗口的大小，有的只是网页视图区域（viewport）的大小。而inner均指视口的大小。
对于所有浏览器，如果在标准模式下：

document.documentElement.clientWidth
document.documentElement.clientHeight

可以取得视口的大小。
而在混杂模式下，需通过

document.body.clientWidth
document.body.clientHeight

才能获取。
查询是标准模式还是混杂模式：

document.compatMode == 'BackCompat' //混杂模式
                    == 'CSS1Compat' //标准模式

打开窗口

通过调用方法window.open(url[, frameName, features, isReplace).具体每个参数表示什么请参考文档。该方法返回一个指向新窗口的引用。
frameName 可以是_blank、_self、_parent、_top 或某个框架的name 值。isReplace 是一个布尔值，表示是否取代打开新窗口的窗口在浏览器中的历史记录。

超时调用和间歇调用

即setTimeout 和setInterval，后者一定要记得进行clearInterval，否则会一直调用，直到页面卸载。同时，可能在上一次调用并未结束的时，时间一到就又会进行下一次调用。因此最好使用setTimeout 来对间歇调用进行模拟。

location对象

该对象保存了导航等一些文档信息。既是window 对象的属性，又是document 的属性，都指向同一个对象。
该对象提供了一些属性可以获取到诸如url 地址、协议、端口、主机名等信息。还提供了如下的方法：

• 页面跳转到新地址

location.assign('url'); //等同于location.href

该方法在历史记录中会保存一条记录，点击返回按钮会返回上一个页面。如果不想保存，可以使用：

location.replace('url');

此时返回按钮会被禁用。

• 刷新页面

location.reload();

如果没有传参数，则是当服务器没有更新时，会在缓存中加载页面。如果强制从服务器加载页面，需要传递参数true。

reload 之后的代码可能不会执行，取决于网络延迟和系统资源等因素。最好将reload放到最后一行。

navigator对象

提供了浏览器的一些信息。
navigator 对象可以检测浏览器中是否安装了插件，通过.plugins 属性可访问。该属性是一个数组，包含了一个一个对象，对象中即是插件的相关信息。

history对象

保存了用户浏览历史记录信息。

history.go(index/string);

如果是数字表示向前（负数）/向后（正数）跳转多少页。如果是字符串，则在历史记录中查找包含该字符串的最近的url。
此外，还有方法：

history.back();
history.forward();

history.length 表示历史记录的条数。