BOM中的那点事-window(二)

3. 窗口的位置

我们有很多的方式来获取和修改窗体的位置，IE，Safari，Opera和Chrome都提供了screenLeft和screenRight属性，分别表示window的相对于屏幕左边和上边的位置。但是FireFox提供的两个对应的属性为screenX和screenY，Safari和Chrome同时支持这两个属性。虽然Opera也支持screenX和screenY这两个属性，但是和screenLeft和screenTop并不等价，因此建议不在Opera中使用screenX和screenY。我在IE9上测试了screenX和screenY，虽然也支持，但是也和screenLeft和screenTop表示不同的含义，后面说到。可以通过如下代码跨浏览器获取窗口的位置：

1 var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;
2 var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY;

在使用这两个属性的时候，有些问题需要注意：

<1>. 在IE，Opera和Chrome中，screenLeft和screenTop保存的是当前window对象到屏幕左上角的垂直和水平距离，不包括边框；这里有一点需要提一下就是在IE9中screenX和screenY保存的位置包括边框(IE以前的版本大家可以试一下)，以IE为例如下图所示：

<2>. 在FireFox，Safari和Chrome中screenX和screenY始终返回top到屏幕左上角的水平和垂直距离，而IE和Opera会返回对应window的精确位置坐标。

终上所述，无法跨浏览器取得窗口左边和上边的精确坐标，但是window提供的moveTo和moveBy可以把窗口移动到精确的新位置。moveTo接受新坐标的x和y坐标，而moveBy接受水平或者垂直移动的像素，需要注意的是这两个方法只能对最外层window起作用，而且这两个方法可能被浏览器禁用(IE7以后以及Opera默认禁用)。如下示例：

1 //将窗口移动到屏幕左上角
2 window.moveTo(0, 0);
3 //将窗口向下移动100像素
4 window.moveBy(0, 100);
5 //将窗口向左移动50像素
6 window.moveBy(-50, 0);

4.窗口大小

前面提到不能跨浏览器精确确定window的位置，同样，想确定窗口的大小也不是一件简单的事。FireFox，Safari，Opera和Chrome都提供了innerWidth, innerHeight, outerWidth, outerHeight四个属性。在Safari和FireFox中outerWidth和outerHeight返回浏览器本身的大小，而在Opera中返回页面视图容器的大小。而innerWidth和innerHeight表示页面中试图区域的大小。而在Chrome中四个属性都返回页面视图的大小，而非浏览器的大小。特别的，IE旧版本没有提供获取当前浏览器大小的接口，但是通过DOM提供了页面可视区域的信息。但是通过测试，在IE9中已经提供这四个属性，同样的innerWidth和innerHeight保存着页面可视区域的大小，而outerWidth和outerHeight保存着浏览器窗体本身的大小。用一个表总结如下：

	IE9	FireFox	Safari	Opera	Chrome
innerWidth	页面视图宽度	页面视图宽度	页面视图宽度	页面视图宽度	页面视图宽度
innerHeight	页面视图高度	页面视图高度	页面视图高度	页面视图高度	页面视图高度
outerWidth	浏览器宽度	浏览器宽度	浏览器宽度	页面视图宽度	页面视图宽度
outerHeight	浏览器高度	浏览器高度	浏览器高度	页面视图高度	页面视图高度

除了通过BOM可以访问窗体大小外，通过DOM同样也可以获取窗体的大小信息，在IE，FireFox，Safari，Opera以及Chrome中通过如下代码可以获取窗体大小信息，但是返回的都是页面可视区域的大小：

1 //用于标准模式
2 var viewPortHeight = document.documentElement.clientHeight;
3 var viewPortWidht = document.documentElement.clientWidth;
4 //用于混杂模式
5 var viewPortHeight1 = document.body.clientHeight;
6 var viewPortWidth1 = document.body.clientWidth;

另外通过resizeTo和resizeBy两个函数可以修改窗口的大小，resizeTo把窗口大小修改为参数表示的大小，而resizeBy在原有基础上修改参数表示的大小，如下代码：

1 //调整窗口大小为100X100
2 window.resizeTo(100, 100);
3 //调整窗口长宽各增大100
4 window.resizeBy(100, 100);

和上一节提到的moveTo和moveBy一样，resizeTo和resizeBy同样也可能会被浏览器禁用，而且这两个方法只对最外层window起作用，不支持内部框架。

欢迎批评指正。

转载于:https://www.cnblogs.com/gyycyy/archive/2012/08/06/BOMInJavaScript2.html

BOM中的那点事-window(二)相关推荐

BOM中的那点事-location
现在来了解一下JavaScript中的location对象.location记录了页面文档的位置信息,当然这个位置不是地址位置,而是指web中的文档位置.location其实是一个很特殊的对象,首先它 ...
bom中的event以及一些window的API
Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 事件对象封装了所有的事件的相关的信息 , ...
JavaScript中常见键盘事件以及BOM中window常用对象
一,键盘事件 keypress键盘按下触发,但是不能识别crtl,shift方向键 keydown键盘按下触发,所有按键都支持,区别于keypress keyup键盘弹起触发代码展示: docume ...
记录安装oracle的那些事（二）之双系统安装
今天电脑恢复了前几天的模样,依旧是仅有的win7,胆颤心惊的依然决定用easybcd装. 首先,资源的需要: 1 两个centos的镜像.bin-dvd的,这个是全的,不用在线下载了. 2 easyB ...
职场中的那点事--小领导大智慧
曾经在上中学的时候,一位语文老师颇有感慨的讲,大学毕业后分到县城工作.当时大学生非常少,在他看来教育局长也就那么回事,更别说校长了.但是多少年过去了,自己也就熬了个校长助理.是呀,当我们每个人刚刚参加 ...
VMware vSAN网络设计中不得不说的事
VMware vSAN网络设计中不得不说的事原创李严省虚实之路 2018-06-07 VMware vSAN分布式存储我想大家都已经很了解了,我再简单的啰嗦一下.VMware vSAN架构如下图 ...
Linux环境中对海康威视工业相机SDK进行二次开发（QT+CMake+Opencv+海康SDK）
关于在Windows环境中对海康威视工业相机SDK进行二次开发的话,可以参考这两篇博客. 海康威视工业相机SDK二次开发(VS+Opencv+QT+海康SDK+C++)(一) 海康威视工业相机SDK二 ...
机器视觉工业缺陷检测的那些事（二、相机）
目录机器视觉工业缺陷检测的那些事(二) 2.相机的选择 (1)工业数字相机的分类: (2)相机的主要参数 ①分辨率 ②速度(帧频/行频) ⑥像元深度 (3)工业数字摄像机主要接口类型 CCD和COM ...
工作中最麻烦的事——北漂18年（52）
上周八卦了一下很独(chuan)特(xiao)的猎头模式,本周开始逐步展开--说下里面的人,今天说下总经理张J先生.再不行的制度,如果人不错也不会有太差的结果:再好的制度,人不成结果也是比较糟糕:如果 ...

BOM中的那点事-window(二)

BOM中的那点事-window(二)相关推荐

最新文章

热门文章