JavaScript浏览器之window-原创手记-慕课网

窗口位置

窗口相对于屏幕左边和上边的位置。

screenLeft和screenTop属性：支持的浏览器有IE、Safari、Opera和Chrome。
screenX和screenY属性：支持的浏览器有Firefox、Safari和Chrome。

使用下列代码可以跨浏览器取得窗口左边和上边的位置：

代码如下：

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

注意：

由于浏览器之间的差异，所以无法在跨浏览器的条件下取得窗口位置的精确坐标值。

窗口大小

要取得浏览器窗口本身的尺寸非常困难，但却可以跨浏览器取得页面视口的大小。

代码如下：

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;
    }
}

*document.compatMode属性用来确定页面是否处于标准模式。

window.open()方法

window.open(URL,name,specs,replace)

这个方法可以接收4个参数：
1、URL：打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口。
2、name：已有窗口或框架的名称或指定target属性。
target="_blank" ： URL加载到一个新的窗口（默认）
target="_parent "： URL加载到父框架
target="_self " ：URL替换当前页面
target="_top"：URL替换任何可加载的框架集
3、specs：第三个参数是一个以逗号分隔的字符串。如果给window.open()传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数，那么就会打开一个带有全部默认设置（工具栏、地址栏和状态栏等）的新浏览器窗口（或者打开一个新标签页——根据浏览器设置）。在不打开新窗口的情况下，会忽略第三个参数。
height：窗口的高度。最小值为100
width：窗口的宽度。最小值为100
left：窗口左侧位置。不能是负值
top：窗口顶部位置。不能是负值
location（yes || no）：是否显示地址字段
menubar（yes || no）：是否显示菜单栏
resizable（yes || no）：是否可调整窗口大小
scrollbars（yes || no）：是否显示滚动条
status（yes || no）：是否要添加一个状态栏
toolbar（yes || no）：是否显示浏览器工具栏
4、replace：装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。
true：URL 替换浏览历史中的当前条目
false ： URL 在浏览历史中创建新的条目

测试代码：

setTimeout(function(){
    window.open("https://www.baidu.com/","_blank","width=400,height=400,left=50,top=50");
},2000)

window.open()方法会返回一个指向新窗口的引用。通过这个返回对象就可以操作新打开的窗口。
closed属性：返回布尔值，弹出窗口是否关闭
opener属性：指向打开新窗口的原始窗口对象
moveTo()方法：移动窗口位置
resizeTo()方法：调整窗口大小
close()方法：关闭新打开的窗口

例子：

var newWindow=window.open("https://www.baidu.com/","_blank","width=400,height=400");
newWindow.moveTo(200,200);
newWindow.resizeTo(200,200);
setTimeout(function(){
    newWindow.close();
    alert(newWindow.closed);
},2000)

大多数浏览器都内置有弹出窗口屏蔽程序，因此需要准确地检测出弹出窗口是否被屏蔽。

代码如下：

bool = false;
try { 
    var newWin = window.open("https://www.baidu.com/", "_blank");
    if (newWin == null){
        bool = true; 
    }
} catch (ex){ 
    bool = true; 
} 
if (bool){ 
    alert("Shielded new window!"); 
}

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。

JavaScript浏览器之window原创