浏览器的窗口位置和大小

4,040 阅读2分钟

前言

作为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及以下浏览器,必当对业务方感恩戴德。