窗口位置
- 使用
screenLeft
和screenTop
表示窗口相对于屏幕左边与上边的位置,IE,Safari,Opera,Chrome均支持, - firefox使用
screenX
和screenY
Safari和Chrome以上均支持
所以可以使用以下代码做兼容1
2var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : screenY;使用moveTo和moveBy来移动窗口(可能被浏览器禁用,不适用于框架,只能对外层的window对象使用)
1). moveTo接收的两个参数是新位置的x和y坐标值
2). moveBy接收的两个参数是在水平和垂直方向上移动的像素数
窗口大小
innerWidth
,innerHeight
,outerWidth
,outerHeight
获取页面视口的大小
1
2
3
4
5
6
7
8
9
10
11
12var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if(typeof pageWidth != 'number'){
if(document.compatMode == 'CSS1Compat'){ //判断是否处于标准模式
pageWidth = document.documentElement.clientWidth; //IE6标准模式下
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth; //混杂模式
pageHeight = document.body.clientHeight;
}
}对于移动设备,
window.innerWidth
,window.innerHeight
保存着可见视口,也就是屏幕上可见页面区域的大小
导航和打开窗口
window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法可以接收4个参数:要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只须传递第一个参数,最后一个参数只在不打开新窗口的情况下使用。
他会返回一个指向新窗口的引用,可以在上面使用resizeTo()
,moveTo()
等方法;1
2
3
4
5var wroxWin = window.open('http://www.baidu.com',"baidu","height=400,width=400,top=10,left=10,resizeable=no,scrollbars=no,toolbar=yes");
wroxWin.resizeTo(1000,500);
wroxWin.close(); //关闭新窗口
系统对话框
alert()
,confirm()
,prompt()
prompt()
用于提示用户输入文本
接受两个参数:要显示给用户的文本提示、文本输入域的默认值(可以为空)
如果点击ok,返回文本输入域的值,反之关闭对话框,返回null
location
- 既是window的属性,又是document的属性
- location.assign(url):打开一个新的URL,并产历史纪录,如果将
window.location
或location.href
设置为url,也会以该值调用assgin
方法 - location.reload(): 重新加载当前页面,如果要强制从服务器里加载,可以添加一个参数
true
,不然会从缓存中取 - location.replace(): 接受一个参数,即url,不会产生历史纪录,用户不能返回前一个页面