window:表示浏览器窗口
所有JavaScript全局对象、函数和变量都是window的成员,甚至HTMLDOM也是。
查看元素尺寸
dom.offsetWidth / dom.offsetHeight
查看元素位置
dom.offsetLeft / dom.offsetTop
若是无定位元素,返回的是相对于文档的坐标
若是有定位元素,返回的是相对于最近有定位的父级元素的坐标
查看最近有定位的父级
dom.offsetParent
返回最近有定位的父级,若无,则返回body;
body的offsetParent返回null;
查看元素的几何尺寸
dom.getBoundingClientRect();
兼容性很好;
该方法返回一个对象,对象里面有left、right、top、bottom和width、height。
注意点:返回的结果并不是实时的。
窗口的大小和位置
1.完整窗口大小
window.outerHeight / window.outWidth
2.文档显示区大小(视口大小)
window.innerHeight / window.innerWidth
注:IE8及以下不兼容
包括了滚动条宽度
document.documentElement.clientHeight / document.documentElement.clientWidth;标准模式下,任意浏览器都兼容。不包括滚动条宽度
document.body.clientHeight // document.body.clientWidth;适用于怪异模式下的浏览器。
调整窗口大小:
1.打开窗口的时候
window.open("url","name",config);
config的格式 如:var config = "left=50,top=50,width=100,height=100";
config中所有都是文档显示区的宽高和位置
2.在打开窗口之后
window.resizeTo(width,heigh); 调整当天窗口的尺寸
window.resizeBy(宽的增量,高的增量)
*两个方法在新版的浏览器中废除了。
除了窗口打开,对应有关闭窗口的方法
window.close() 关闭当天窗口
窗口的定位:
left: screenX/screenLeft;
top: screenY/screenTop;
移动窗口的位置:
window.moveTo(x,y) 移动当前窗口
window.moveBy(x的增量,y的增量)
可用的屏幕宽度和高度
1.完整的分辨率:screen.width / screen.height
2.去掉任务栏的可用宽和高(减去界面特性,如任务栏):screen.availWith / screen.availHeight
让滚动条滚动
window上有三个方法
scroll(x,y)
scrollTo(x,y)
scrollBy(x,y)
三个方法类似,传入x,y坐标,实现让滚动条滚动。
前面个两个方法基本一样,而scrollBy()会在之前的数据基础上做累加。可以利用scrollBy实现快速阅读的功能。
查看滚动条的滚动距离
window.pageXOffset / window.pageYOffset 注:IE8及以下不兼容
document.body.scrollLeft / document.body.scrollTop
document.documentElement.scrollLeft / document.documentElement.scrollTop
上面两组方法因为兼容性比较紊乱,采取的方法是两种方法相加,因为不可能两个同时有值。
window.location
位置对象
用于获取页面的url地址
location.href 返回当前页面的整个URL
location.protocol 返回web协议(http://或者https://)
location.hostname 返回web主机的域名
location.port 返回端口号
location.pathname 返回路径和文件名。
location.assign()方法,加载新的文档
window.history对象
包含浏览器历史
history.back();
history.forword();
分别对应加载历史列表中的后一个和前一个URL。
消息框
JS中创建了3中消息框:
1.警告框
alert(“文本”);
2.确认框
confirm("文本")
使用户可以验证或者接受某些消息。确定返回true,否则false
3.提示框
prompt("文本","默认值")
如果用户点击确定,那么返回值为输入的值。取消则返回null