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著, 曹力 张欣 等译。
分享到:
相关推荐
Javascript高级编程学习笔记27——BOM1window对象1.docx
为了能够操纵浏览器和文档,JavaScript使用分层的父对象和子对象,这就是“文档对象模型”。这些对象的组织类似一个树型结构,并表示一个Web文档的所有内容和组件。 注意:”文档对象模型”不是JavaScript语言的一...
NULL 博文链接:https://zisefeiniao.iteye.com/blog/387035
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致,有一些自己的理解和一些扩展的部分
前端学习(五)——Javascript学习笔记(三)对象.xmind
HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 ...
下面小编就为大家带来一篇JavaScript——DOM操作——Window.document对象详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
《javascript》——event对象与事件
JavaScript-学习笔记
Window对象文档,对学习javascript基本的初学者很有帮助
JavaScript基础
Javascript之BOM(window对象)详解_.docx
javascript入门学习笔记,绝对经典
个人Javascript学习笔记 精华版 个人Javascript学习笔记 精华版 个人Javascript学习笔记 精华版
前端学习——javascript学习笔记(二)函数
NULL 博文链接:https://dbajun.iteye.com/blog/242763
JavaScript学习笔记JavaScript学习笔记
ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心。 BOM的核心对象是window,它表示浏览器的一个实例。 在浏览器中,window对象既是JavaScript访问浏览器窗口的一个...
JavaScript学习笔记之创建对象_.docx
前端学习(六)——javascript学习笔记(四)HTML DOM.xmind