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著, 曹力 张欣 等译。