BOM

唠唠window那些小事

窗口位置

  1. 使用screenLeftscreenTop表示窗口相对于屏幕左边与上边的位置,IE,Safari,Opera,Chrome均支持,
  2. firefox使用screenXscreenY
  3. Safari和Chrome以上均支持
    所以可以使用以下代码做兼容

    1
    2
    var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : screenX;
    var topPos = (typeof window.screenTop == "number") ? window.screenTop : screenY;
  4. 使用moveTo和moveBy来移动窗口(可能被浏览器禁用,不适用于框架,只能对外层的window对象使用)
    1). moveTo接收的两个参数是新位置的x和y坐标值
    2). moveBy接收的两个参数是在水平和垂直方向上移动的像素数

窗口大小

  1. innerWidth,innerHeight,outerWidth,outerHeight
  2. 获取页面视口的大小

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var 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;
    }
    }
  3. 对于移动设备,window.innerWidth,window.innerHeight保存着可见视口,也就是屏幕上可见页面区域的大小

导航和打开窗口

window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法可以接收4个参数:要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只须传递第一个参数,最后一个参数只在不打开新窗口的情况下使用。
他会返回一个指向新窗口的引用,可以在上面使用resizeTo(),moveTo()等方法;

1
2
3
4
5
var 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

  1. 既是window的属性,又是document的属性
  2. location.assign(url):打开一个新的URL,并产历史纪录,如果将window.locationlocation.href设置为url,也会以该值调用assgin方法
  3. location.reload(): 重新加载当前页面,如果要强制从服务器里加载,可以添加一个参数true,不然会从缓存中取
  4. location.replace(): 接受一个参数,即url,不会产生历史纪录,用户不能返回前一个页面
文章目录
  1. 1. 窗口位置
  2. 2. 窗口大小
  3. 3. 导航和打开窗口
  4. 4. 系统对话框
  5. 5. location