web 浏览器窗口

1、窗口位置：

取得浏览器窗口左边和上边距屏幕左边和上边的位置

var leftPos = (typeof window.screenLeft == "number")? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number")? window.screenTop : window.screenY;

在IE、Opera中，screenLeft 和 screenTop中保存的是屏幕左边和上边到由 window 对象表示的页面可见区域（包含工具栏的高度）的距离。

window 对象有两个移动窗口的方法：

window.moveTo(posX,poxY);   绝对移动

window.moveBy(posX,poxY);  相对移动

这两个方法有可能会被浏览器禁用。

2、窗口大小：

各个浏览器的window对象都有innerWidth、innerHeight、outerWidth、outerHeight属性，但定义有些不同。

可以获取页面视口的大小：

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
    if(document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

window对象有两个调整窗口大小的方法：

window.resizeTo(lengthX,lengthY);   绝对调整

window.resizeBy(lengthX,lengthY);  相对调整

这两个方法有可能会被浏览器禁用。

 3、导航和打开窗口

使用 window.open() 方法可以导航到一个特定的 URL ，也可以打开一个新的浏览器窗口。

使用格式：

window.open(url [,target [, features[, isReplaceCurrentPageHistory]]]);

参数说明：要加载的URL、窗口目标、个特性字符创、新页面是否取代浏览器历史记录中当前加载页面的布尔值。 通常只需传递第一个参数，最后一个参数只在不打开新窗口时使用。

3.1 导航

// 等同于 <a href="http://www.xxx.com/" target="topFrame"></a>
// topFrame 是frameset框架name 值
window.open("http://www.xxx.com/","topFrame"); //第二个参数也可以: _self, _parent, _top, _blank .默认 _self

3.2 打开新窗口

如果 window.open() 的第二个参数不是一个已经存在的窗口或框架，那么会根据第三个参数，打开一个新窗口或标签页。如果没有第三个参数，那么打开一个默认设置的新窗口或新标签页（根据浏览器设置）。在不打开新窗口时，会忽略第三个参数。

window.open("test.html","topFrame","height=400,width=400, top=20,left=20,resizable=yes"); //存在topFrame框架页面，忽略第三个参数,在topFrame中打开
wroxWin = window.open("test.html","_blank","height=400,width=400, top=20,left=20,resizable=yes"); //打开新窗口, 忽略"_blank"，返回新窗口的引用

wroxWin.resizeTo(500,500); // 可以对 window.open()打开的窗口进行 大小调整、位置移动，而主浏览器窗口大多浏览器是不可以的。

wroxWin.moveTo(100,100);

wroxWin.close(); // 还可以关闭窗口，关闭后其引用还在，wroxWin.closed 值为 true

浏览器有可能会屏蔽或者阻止弹出窗口，可能返回 null ,也可能抛出错误。

var blocked = false;
try{
    var wroxWin = window.open("https://www.baidu.com","_blank");
    if(wroxWin == null){
        blocked = true;
    }
} catch (ex){
    blocked = true;
}

if(blocked){
    console.log("The popup was blocked!");
}

window.open() 的第二个参数选项：

channelmode=yes|no|1|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小值为100
left=pixels	该窗口的左侧位置
location=yes|no|1|0	是否显示地址字段.默认值是yes
menubar=yes|no|1|0	是否显示菜单栏.默认值是yes
resizable=yes|no|1|0	是否可调整窗口大小.默认值是yes
scrollbars=yes|no|1|0	是否显示滚动条.默认值是yes
status=yes|no|1|0	是否要添加一个状态栏.默认值是yes
titlebar=yes|no|1|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置，不能为负
width=pixels	窗口的宽度.最小值为100