浏览器的窗口位置和大小-白红宇

前言

作为JavaScript的一个虔诚的教徒，在空余时间我又去回顾了一遍（不知道是第几遍了）圣经（JavaScript 高级程序设计），过程挖出了一个知识点---BOM 窗口位置和大小，回顾了几年的开发过程，其实并没有用到太多，所以渐渐把它遗忘到角落，但是想到虔诚的教徒不能厚此薄彼，决定写这篇文章来加深下对 BOM 窗口的印象。

窗口的位置

谈到窗口的位置，那就会出现万恶的浏览器兼容问题，以下列举一些主流浏览器获取窗口位置的属性。

screenLeft, screenTop
支持的浏览器有 IE, Safari, Opera, Chrome

screenX, screenY
支持的浏览器有 Firefox, Safari, Chrome, 此外，Opera也支持该属性，但与screenLeft,screenTop不对应

到此可能我会很自信的给出获取浏览器位置的方法，如下

const leftPosition = typeOf window.screenLeft === 'number' ? window.screenLeft : window.screenXconst topPosition = typeOf window.screenTop === 'number' ? window.screenTop : window.screenY复制代码

但是

浏览器表现的结果却不尽然相同

假设window对象是最外层对象，在IE、Opera中，当浏览器上端紧贴屏幕（y轴坐标为0），screenTop的值为浏览器工具栏高度，大概是下图这个样子

在Chrome、Firefox、Safari中，同样的条件下，screenTop的值为0

另外要注意的是，Firefox、Safari、Chrome始终返回每个框架的top.screenX和top.screenY的值，不受页面外边距改变的影响。而IE、Opera则会给出框架相对于屏幕边界的精确坐标值

窗口的大小

相同的，浏览器窗口大小也提供了innerWidth, innerHeight, outerWidth, outerHeigt四个属性。

在IE9+（考虑IE8？不存在的）， Safari， Firefox中，outerWidth和outerHeight返回浏览器窗口本身尺寸。innerWidth，innerHeight表示页面视口大小（减轻边框宽度）。

在Opera中，outerWidth和outerHeight这两个属性的值表示页面视图容器的大小。innerWidth，innerHeight表示页面视口大小（减轻边框宽度）。

在Chrome中，outerWidth和outerHeight与innerWidth，innerHeight返回的值一致，表示视口的大小。
最终会发现我们无法确定浏览器窗口本身的大小，但是可以缺德页面视口的大小。document.documentElement对象中保存了clientWidth，clientHeight两个属性，从而来描述也是视口信息，所以可以通过以下代码来获取视口大小

let pageWidth = window.innerWidth,    pageHeight = window.innerHeightif (typeOf innerWidth != 'number') {    if (document.compatMode == 'CSS1Compat') {//严格模式        pageWidth = document.documentElement.clientWidth        pageHeight = document.documentElement.clientHeight    } else {        pageWidth = document.body.clientWidth        pageHeight = document.body.clientHeight    }}复制代码

总结

总的来说，以上并不是什么难的知识点，在目前一个各大浏览器并存的情况下，如何兼容才是问题所在。本人作为一个勤勤恳恳的切图仔，只要不遇到IE8及以下浏览器，必当对业务方感恩戴德。