JS地毯式学习四

1  窗口的位置

用来确定和修改 window 对象位置的属性和方法有很多。

IE 、 Safari 、 Opera 和 Chrome都提供了 screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置 。
Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息， Safari 和 Chrome 也同时
支持这两个属性。

// 跨浏览器的方法
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX ;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;

2.窗口页面大小

　　 Firefox 、 Safari 、 Opera 和 Chrome 均为此提供了 4 个属性： innerWidth和 innerHeight ， 返回浏览器窗口本身的尺寸 ； outerWidth 和 outerHeight ， 返回浏览器窗口本身及边框的尺寸。　

　　在 IE 以及 Firefox 、 Safari 、 Opera 和 Chrome 中 ， document.documentElement.clientWidt h

和 document.documentElement.clientHeight 中保存了页面窗口的信息。
PS ：在 IE6 中，这些属性必须在标准模式下才有效；如果是怪异模式，就必须通 过
document.body.clientWidth 和 document.body.clientHeight 取得相同的信息。

　跨浏览器获取窗口的页面大小

var width = window.innerWidth; // 这里要加 window ，因为 IE 会无效
var height = window.innerHeight;
if (typeof width != 'number') { // 如果是 IE ，就使用 document
if (document.compatMode == 'CSS1Compat') {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else {
width = document.body.clientWidth; // 非标准模式使用 body
height = document.body.clientHeight;
}
}

3. 调试工具

IE8 、 Firefox 、 Chrome 、 Opera 、 Safari 都自带了自己的调试工具 ， 而开发人员只习惯 了
Firefox 一种 ， 所以很多情况下 ， 在 Firefox 开发调试 ， 然后去其他浏览器做兼容 。 其实 Firebu g
工具提供了一种 Web 版的调试工具： Firebug lite 。
以下是网页版直接调用调试工具的代码：直接复制到浏览器网址即可。
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.doc
umentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);
E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(doc
ument,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','rele
ases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');