温故js系列（11）BOM

前端学习&＃xff1a;教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总

欢迎提issues斧正&＃xff1a;BOM

Javascript-BOM

BOM是browser object model的缩写&＃xff0c;简称浏览器对象模型。它本身是没有标准的或者还没有哪个组织去标准它&＃xff0c;所以&＃xff0c;BOM缺乏标准。它提供了很多对象&＃xff0c;并且每个对象都提供了很多方法与属性&＃xff0c;用于访问浏览器的功能。

window对象

BOM的核心对象是window&＃xff0c;它表示浏览器的一个实例&＃xff0c;主要用于管理窗口与窗口之间的通讯。window 对象处于Javascript结构的最顶层&＃xff0c;对于每个打开的窗口&＃xff0c;系统都会自动为其定义window 对象。F12打开console,输入window,即可看到window的所有属性和方法。太多了&＃xff0c;很多是不需要我们去深入了解的。

window 对象的属性

属性 含义
closed 当窗口关闭时为真
defaultStatus 窗口底部状态栏显示的默认状态消息
document 窗口中当前显示的文档对象
frames 窗口中的框架对象数组
history 保存着窗口最近加载的URL
length 窗口中的框架数
location 当前窗口的URL
name 窗口名
offscreenBuffering 用于绘制新窗口内容并在完成后复制已存在的内容&＃xff0c;控制屏幕更新
opener 打开当前窗口的窗口
parent 指向包含另一个窗口的窗口&＃xff08;由框架使用&＃xff09;
screen 显示屏幕相关信息&＃xff0c;如高度、宽度&＃xff08;以像素为单位&＃xff09;
self 指示当前窗口。
status 描述由用户交互导致的状态栏的临时消息
top 包含特定窗口的最顶层窗口&＃xff08;由框架使用&＃xff09;
window 指示当前窗口&＃xff0c;与self 等效

要验证这些属性&＃xff0c;直接F12打开console&＃xff0c;验证即可。

window 对象的方法

方法 功能
alert(text) 创建一个警告对话框&＃xff0c;显示一条信息
blur() 将焦点从窗口移除
clearInterval(interval) 清除之前设置的定时器间隔
clearTimeOut(timer) 清除之前设置的超时
close() 关闭窗口
confirm() 创建一个需要用户确认的对话框
focus() 将焦点移至窗口
open(url,name,[options]) 打开一个新窗口并返回新window 对象
prompt(text,input) 创建一个对话框要求用户输入信息
scroll(x,y) 在窗口中滚动到一个像素点的位置
moveBy(x,y) 按照给定像素参数移动指定窗口,x,y代表水平位移量和垂直位移量
moveTo(x,y) 将窗口移动到指定的指定坐标(x,y)处
resizeBy(x,y) 将当前窗口改变指定的大小(x,y)&＃xff0c;当x、y的值大于0时为扩大&＃xff0c;小于0时为缩小
resizeTo(x,y) 将当前窗口改变大小&＃xff0c;x、y分别为宽度和高度
print() 调出打印对话框
find() 调出查找对话框
setInterval(func,time) 经过指定时间间执行代码
clearInterval("id"); 取消setInterval
setTimeout(func,time) 在定时器超过后执行代码
clearTimeout("id"); 取消还未执行的setTimeout

window下的属性和方法&＃xff0c;可以使用window.属性、window.方法()或者直接属性、方法()的方式调用。下面简要介绍几个。

window属性-窗口的位置和大小

窗口的位置&＃xff0c;IE、Safari、Opera 和Chrome都提供了screenLeft 和screenTop 属性&＃xff0c;分别用于表示窗口相对于屏幕左边和上边的位置。firefox 则在screenX 和screenY 属性中提供相同的窗口位置信息&＃xff0c;Safari 和Chrome 也同时支持这两个属性。

console.log(screenLeft); //102, fireFox下输出screenLeft is not defined
console.log(screenX); //102

兼容&＃xff1a;

var leftX &＃61; (typeof screenLeft &＃61;&＃61; &＃39;number&＃39;) ? screenLeft : screenX;
var topY &＃61; (typeof screenTop &＃61;&＃61; &＃39;number&＃39;) ? screenTop : screenY;

窗口页面大小&＃xff0c;IE、Firefox、Safari、Opera 和Chrome 均为此提供了4 个属性&＃xff1a;innerWidth和innerHeight&＃xff0c;返回浏览器窗口本身的尺寸&＃xff1b;outerWidth 和outerHeight&＃xff0c;返回浏览器窗口本身及边框的尺寸。

console.log(innerWidth); //1366 页面宽度
console.log(innerHeight); //681 页面高度
console.log(outerWidth); //1366 页面长度&＃43;边框
console.log(outerHeight); //768 页面高度&＃43;边框
//缩小窗口数据就会有变化

旧的IE版本没有提供当前浏览器窗口尺寸的属性。不过&＃xff0c;DOM有提供相关的方法&＃xff1a;

document.documentElement.clientWidth
document.documentElement.clientHeight

当然&＃xff0c;这是标准模式下&＃xff0c;还要兼容怪异模式&＃xff1a;

document.body.clientWidth; //非标准模式使用body
document.body.clientHeight;


window方法-系统对话框

浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。

alert()

alert(&＃39;xzavier warning&＃39;);

直接弹出弹框&＃xff0c;弹框只有确定和关闭按钮。
一般用于用户交互时做出提示&＃xff0c;不过这种方法的用户体验不是很好&＃xff0c;现在都流行使用业务需要的用户体验好的弹窗。
另外&＃xff0c;以前常用于调试代码&＃xff0c;但现在基本不用了。因为它很烦&＃xff0c;弹一个要关一个。如果调试代码后忘记关掉&＃xff0c;还会给用户带来较差的体验。现在都用console&＃xff0c;在控制台打印&＃xff0c;研发人员可以很方便的看到调试信息&＃xff0c;也不用去关闭弹窗之类的&＃xff0c;就算一时疏忽忘记删掉调试代码&＃xff0c;也不会影响到用户体验。

confirm()

confirm(&＃39;confirm or cancel&＃39;);

确定和取消弹框&＃xff0c;按确定返回true&＃xff0c;按取消或者关闭按钮返回false。

if (confirm(&＃39;confirm or cancel&＃39;)) { alert(&＃39;you confirmed&＃39;);
} else {alert(&＃39;you canceled&＃39;);
}

prompt()

prompt(&＃39;please input a number&＃39;, 0);


输入提示框&＃xff0c;带两个参数&＃xff0c;一个提示&＃xff0c;一个值。按确定返回输入值&＃xff0c;不填返回空&＃xff0c;按取消或者关闭按钮返回null。

window方法-新建窗口

window.open()方法可以导航到一个特定的URL&＃xff0c;也可以打开一个新的浏览器窗口。它可以接受四个参数&＃xff1a;
1.要加载的URL
2.窗口的名称或窗口目标
3.一个字符串参数&＃xff0c;表示新窗口的长宽等属性值
4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。

open(&＃39;https://segmentfault.com/blog/xzavier&＃39;); //新建页面并打开
open(&＃39;https://segmentfault.com/blog/xzavier&＃39;,&＃39;xzavier&＃39;); //新建页面并命名窗口并打开
open(&＃39;https://segmentfault.com/blog/xzavier&＃39;,&＃39;_parent&＃39;); //在本页窗口打开

target 属性&＃xff1a;
blank - 在一个新的未命名的窗口载入文档
_self - 在相同的框架或窗口中载入目标文档
_parent - 把文档载入父窗口或包含了超链接引用的框架的框架集
_top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架

字符串参数&＃xff1a;

属性 值 说明
width 数值 新窗口的宽度 &＃xff0c;不能小于100
height 数值 新窗口的高度&＃xff0c;不能小于100
top 数值 新窗口的Y坐标&＃xff0c;不能是负值
left 数值 新窗口的X坐标&＃xff0c;不能是负值
location yes/no 是否在浏览器窗口中显示地址栏&＃xff0c;不同浏览器默认值不同
menubar yes/no 是否在浏览器窗口显示菜单栏&＃xff0c;默认为no
resizable yes/no 是否可以通过拖动浏览器窗口的边框改变大小&＃xff0c;默认为no
scrollbars yes/no 如果内容在页面中显示不下&＃xff0c;是否允许滚动&＃xff0c;默认为no
status yes/no 是否在浏览器窗口中显示状态栏&＃xff0c;默认为no
toolbar yes/no 是否在浏览器窗口中显示工具栏&＃xff0c;默认为noopen(&＃39;https://segmentfault.com/blog/xzavier&＃39;,&＃39;xzavier&＃39;,&＃39;width&＃61;600,height&＃61;400,top&＃61;200,left&＃61;400,resizable&＃61;yes&＃39;);
//类似一个弹窗弹出一个网页&＃xff0c;open有返回值&＃xff0c;返回window对象

window方法-setTimeout和setInterval

Javascript是单线程语言&＃xff0c;它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。setTimeout在指定的时间过后执行代码&＃xff0c;setInterval是每隔指定的时间就执行一次代码。

setTimeout

接受两个参数&＃xff1a;要执行的代码和超时时间&＃xff08;单位&＃xff1a;毫秒&＃xff09;

function timer() {console.log("xzavier&＃39;s timer");
}
setTimeout(timer, 2000);

setTimeout()返回一个数值ID&＃xff0c;表示这个超时调用。这个ID是超时调用的唯一标识符&＃xff0c;可以通过它来取消超时调用。要取消尚未执行的超时调用&＃xff0c;可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。

function timer() {console.log("xzavier&＃39;s timer");
}
var xzavier &＃61; setTimeout(timer, 2000);
clearTimeout(xzavier); //取消超时调用不执行

setInterval

setInterval按照指定的时间间隔重复执行代码&＃xff0c;直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()&＃xff0c;接受参数&＃xff1a;要执行的代码和每次执行之前需要等待的毫秒数

setInterval(function () {console.log(&＃39;xzavier&＃39;);
}, 2000);

取消间歇调用方法和取消超时调用类似&＃xff0c;使用clearInterval()方法。但取消间歇调用的重要性要远远高于取消超时调用&＃xff0c;因为在不加干涉的情况下&＃xff0c;间歇调用将会一直执行到页面关闭。

var xzavier &＃61; setInterval(function () { console.log(&＃39;xzavier&＃39;);
}, 1000);
clearInterval(xzavier);

一般来说&＃xff0c;使用了setInterval就一定要使用clearInterval去清除&＃xff0c;所以&＃xff0c;使用超时调用来模拟间歇调用是一种最佳模式。因为&＃xff0c;使用超时调用时&＃xff0c;没必要跟踪超时调用ID&＃xff0c;因为每次执行代码之后&＃xff0c;如果不再设置另一次超时调用&＃xff0c;调用就会自行停止。

location对象

location是BOM对象之一&＃xff0c;它提供了与当前窗口中加载的文档有关的信息。location对象是window对象的属性&＃xff0c;也是document对象的属性。所以window.location和document.location等效。

location 对象的属性

属性 描述的URL内容
host 主机名&＃xff1a;端口号
hostname 主机名
href URL
pathname 路径名
port 端口号
protocol 协议部分
search 查询字符串
hash 如果该部分存在&＃xff0c;表示锚点部分

location 对象的方法

方法 功能
assign() 跳转到指定页面&＃xff0c;与href等效
reload() 重载当前URL
repalce() 用新的URL 替换当前页面

F12打开调试器&＃xff0c;console下打印window.location即可查看location的属性和方法。

location.reload(); //最有效的重新加载&＃xff0c;有可能从缓存加载
location.reload(true); //强制加载&＃xff0c;从服务器源头重新加载
location.assign(&＃39;https://segmentfault.com/blog/xzavier&＃39;); //跳转到指定的URL
location.replace(&＃39;https://segmentfault.com/blog/xzavier&＃39;); //可以避免产生跳转前的历史记录&＃xff0c;跳转后浏览器不能返回上一个页面

navigator对象

navigator对象&＃xff0c;其实也是window对象的属性&＃xff0c;包含大量有关Web浏览器的信息&＃xff0c;在检测浏览器及操作系统上非常有用。

console.log(navigator.userAgent);
//用户代理头信息&＃xff0c;很多时候用于判断浏览器 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
console.log(navigator.appCodeName);
//浏览器代码名 Mozilla
//appCodeName 属性是一个只读字符串&＃xff0c;声明了浏览器的代码名。
//在所有以 Netscape 代码为基础的浏览器中&＃xff0c;它的值是 "Mozilla"。
//为了兼容起见&＃xff0c;在 Microsoft 的浏览器中&＃xff0c;它的值也是 "Mozilla"。
console.log(navigator.appName);
//官方浏览器名 Netscape
//appName返回所使用浏览器的名称。该属性并不一定能返回正确的浏览器名称。
//在基于 Gecko 的浏览器 &＃xff08;例如 Firefox&＃xff09;和基于 WebKit 的浏览器
//&＃xff08;例如 Chrome 和 Safari&＃xff09;中&＃xff0c;返回的浏览器名称都是 "Netscape".
console.log(navigator.appVersion);
//浏览器版本信息 5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
console.log(navigator.COOKIEEnabled);
//是否启用COOKIE&＃xff0c;返回true/false
console.log(navigator.javaEnabled);
//是否启用java&＃xff0c;返回true/false
console.log(navigator.platform); Win32
//浏览器所在计算机平台
console.log(navigator.plugins);
//安装在浏览器中的插件数组 PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, length: 5}

history对象

history对象是window 对象的属性&＃xff0c;它保存着用户上网的记录&＃xff0c;从窗口被打开的那一刻算起。
history对象有一个length属性&＃xff0c;表示history 对象中的记录数。history对象有三个方法。

方法 功能
back() 前往浏览器历史条目前一个URL&＃xff0c;类似后退
forward() 前往浏览器历史条目下一个URL&＃xff0c;类似前进
go(number) 跳转指定历史记录的URL

screen对象

screen对象是window 对象的属性,用于获取屏幕的信息。

属性 描述
width 屏幕的宽度
height 屏幕的高度
availWidth 窗口可以使用的屏幕的宽度
availHeight 窗口可以使用的屏幕的高度

document对象见&＃xff1a; 温故js系列-DOM