浏览器的窗口位置和大小

前言

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

窗口的位置

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

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

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

const leftPosition = typeOf window.screenLeft === 'number' ? window.screenLeft : window.screenX
const 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四个属性。

1. 在IE9+（考虑IE8？不存在的）， Safari， Firefox中，outerWidth和outerHeight返回浏览器窗口本身尺寸。innerWidth，innerHeight表示页面视口大小（减轻边框宽度）。
   
2. 在Opera中，outerWidth和outerHeight这两个属性的值表示页面视图容器的大小。innerWidth，innerHeight表示页面视口大小（减轻边框宽度）。
   
3. 在Chrome中，outerWidth和outerHeight与innerWidth，innerHeight返回的值一致，表示视口的大小。
   
   最终会发现我们无法确定浏览器窗口本身的大小，但是可以缺德页面视口的大小。document.documentElement对象中保存了clientWidth，clientHeight两个属性，从而来描述也是视口信息，所以可以通过以下代码来获取视口大小

let pageWidth = window.innerWidth,
    pageHeight = window.innerHeight
if (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及以下浏览器，必当对业务方感恩戴德。