Javascript中浏览器窗口的基本操作总结

前端之家收集整理的这篇文章主要介绍了Javascript中浏览器窗口的基本操作总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

窗口位置

【1】获取

  浏览器(firefox不支持)提供了screenLeftscreenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置

  在窗口最大化的情况下,运行下列代码时,各个浏览器返回的值并不相同。chrome返回left:0;top:0。而IE则返回left:0;top:56(若有菜单栏,则返回left:0;top:78),这是因为IE中保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离。safari则由于自身的bug,返回left:-8;top:-8

left:0;top:93

  screenXscreenY属性(IE8-)也提供相同的窗口位置信息

  [注意]screenLeftscreenTopscreenXscreenY都是只读属性修改他们的值,并不会使得窗口发生移动

  在窗口最大化的情况下,各个浏览器返回的值依然不相同。firefox返回left:-7;top:-7。chrome依然返回left:0;top:0。而IE9+不论是否显示菜单栏始终返回left:-7;top:-7。safari则由于自身的bug,依然返回left:-8;top:-8

结果:

left:0;top:93

兼容

  获取窗口位置的兼容写法如下

  [注意]由于各浏览器的实现不同,无法在跨浏览器条件下取得精确坐标值

【2】移动

  使用moveTo()moveBy()方法可以将窗口精确移动到一个新位置,这两个方法只有IE浏览器支持

  moveTo()接收两个参数,分别是新位置的x和y坐标值

  moveBy()接收两个参数,分别是水平和垂直方向上移动像素数

窗口大小

【1】获取

  outerWidthouterHeight属性用于表示浏览器窗口本身的尺寸

  [注意]IE8-浏览器不支持

结果:

outerWidth:1440;outerHeight:743

  innerWidthinnerHeight属性用于表示页面大小,实际上等于浏览器窗口尺寸大小减去浏览器自身边框及菜单栏、地址栏、状态栏等的宽度

  [注意]由于