JavaScript BOM学习札记——window对象2
日期：2014-05-16 浏览次数：20399 次
JavaScript BOM学习笔记——window对象2
1.窗口操作：
? ? ? ? window对象对于操作浏览器窗口非常有用，开发人员可以利用window对象移动或者调整浏览器窗口大小。主要操作有：
?
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function operWindow() {
//浏览器向右移动20像素，向下移动20像素
window.moveBy(20,20);
//浏览器变为150像素宽，300像素高
window.resizeTo(150,300);
//将浏览器窗口宽度加宽150像素，高度不变
window.resizeBy(150,0);
//将浏览器移动到(0,0)位置
window.moveTo(0,0);
}
</script>
</head>
<body onload="operWindow();">
</body>
</html>
?如果需要知道浏览器的位置以及大小，由于各个浏览器实现的标准不同意，产生了一些问题：
（1）IE提供了window.screenLeft和window.screenTop来判断窗口的位置，但是没有提供任何判断窗口大小的方法。但是可以通过document.body.offsetWidth和document.body.offsetHeight来判断浏览器视口的大小。
（2）Mozilla window.screenX和window.screenY来判断窗口的位置，使用window.innerWidth和window.innerHeight判断视口大小，通过提供window.outerWidth和window.outerHeight判断浏览器大小；
?
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function getIEWindowInfo() {
alert("窗口位置：（"+window.screenLeft+","+window.screenTop+")");
alert("视口大小：（"+document.body.offsetWidth+","+document.body.offsetHeight+")");
}
function operWindow() {
//浏览器向右移动20像素，向下移动20像素
window.moveBy(20,20);
//浏览器变为150像素宽，300像素高
window.resizeTo(150,300);
//将浏览器窗口宽度加宽150像素，高度不变
window.resizeBy(150,0);
//将浏览器移动到(0,0)位置
window.moveTo(0,0);
getIEWindowInfo();
}
</script>
</head>
<body onload="operWindow();">
</body>
</html>
?上面的例子，在IE8中的结果与上面的解释不一致。我怀疑上面的解释是针对早期版本的。
?
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function getIEWindowInfo() {
alert("窗口位置：（"+window.screenLeft+","+window.screenTop+")");
alert("视口大小：（"+document.body.offsetWidth+","+document.body.offsetHeight+")");
}
function getFFWindowInfo() {
alert("窗口位置：（"+window.screenX+","+window.screenY+")");
alert("窗口大小：（"+window.outerWidth+","+window.outerHeight+")");
alert("视口大小：（"+window.innerWidth+","+window.innerHeight+")");
}
function operWindow() {
//浏览器向右移动20像素，向下移动20像素
window.moveBy(20,20);
//浏览器变为150像素宽，300像素高
window.resizeTo(150,300);
//将浏览器窗口宽度加宽150像素，高度不变
window.resizeBy(150,0);
//将浏览器移动到(0,0)位置
window.moveTo(0,0);
getIEWindowInfo();
}
</script>
</head>
<body onload="operWindow();">
</body>
</html>
?这个例子在Firefox上倒是正常的。
?
尽管移动窗口和调整浏览器的位置是一件很酷的事情，但是应该尽量少用，这些会对用户的操作产生影响。
?
参考书：
《JavaScript高级编程》Nicolas C. Zakas著， 曹力 张欣 等译。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
