JavaScript高级程序设计window对象学习记录

一.窗口位置

　　1.浏览器中获得窗口距屏幕左右边界位置差异

　　　　1）.在ie。chrome、safari、opera中，通过screenTop/screentLeft获得窗口相对屏幕左边和上边的位置，

　　　　2）但在firefox中没有这两个属性，需要使用screenX/screenY两个属性获得；

　　ps： 虽然opera中既支持screenTop/screenLeft， 又支持screenX/screenY属性，但是属性对应的值却不相同。

　　　　并且在IE和opera中，screenTop/screenLeft保存的是从屏幕左边和上边到window对象表示的页面的可见区域的距离，也就是说，当window对象是最外层，而且浏览器窗口紧贴屏幕最上端，即y轴坐标为0，那莫screenTop返回的是浏览器上工具栏的高度。但在chrome、firefox、safari中，screenTop中保存的是整个浏览器相对于屏幕的坐标值，当满足上述情况的是时候，screenTop返回的是0.

　　moveTo（x，y）移动到（x，y）坐标位置

　　moveBy（0， 100）在水平或垂直方向移动的像素数

二.窗口大小

　　1.ie9+、firefox、safari、opera、chrome都提供了四个属性：innerwidth、innerheight、outerWidth、outerHeight

　　2.差异：在IE9+、safari、firefox中，outerWidth与outerHeight返回浏览器窗口本身的大小。

　　　　　　在opera中，outerWidth与outerHeight返回单个标签页对应的浏览器窗口大小， innnerWidth/innerHeight则表示该容器中页面视图大小。

　　　　　　在chrome中outerWidth、outerHeight、innerHeight、innerWidth都返回相同的大小，即视口（viewport）的大小。

　　3.可通过DOM提供的方法获取窗口的大小

　　　　document.documentElement.clientWidth 和 document.documentElement.clientHeight获取视口（viewport）的大小

　　　　在ie6中，以上的方法在标准模式下才会生效，如果是混杂模式，则需使用document.body.clientWidth和document.body.clientHeight方式获得视口大小，而在混在模式下的chrome，以上两种方式都可取到视口的大小。

　　　　可通过如下方式获取当前视口大小：

　　　　var　pageWidth = window.innerWidth;

　　　　var pageHeight = window.innerHeight;

　　　　if (typeof pageWidth !== 'number') {

　　　　　　if (document.compatMode == 'CSS1Compat'){ // document.compatMode 为判断页面是否处于标准模式

　　　　　　　　pageWidth = document.documentElement.clientWidth;

　　　　　　　　pageHeight = document.docuemntElement.clientHeight;

　　　　　　} else {

　　　　　　　　pageWidth = document.body.clientWidth;

　　　　　　　　pageHeight = document.body.clientHeight;

　　　　　　}

　　　　}

三.导航和打开窗口

　　1.window.open（要加载的url， 窗口目标， 一个特性字符串， 一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值）// 通常只传第一个参数，最后一个参数只在不打开浏览器新窗口的情况下使用。

 

转载于:https://www.cnblogs.com/lzj0824/p/8870240.html