BOM窗口操作

BOM窗口操作

窗口关系

top对象始终指向最上层(最外层)窗口（因为可能存在iframe嵌套），即浏览器本身。如果当前窗口就是最上层窗口，则parent等于top（都等于window）。还有一个self对象，它是终极的window属性，始终会指向window。实际上window与self就是同一个对象，之所以要暴露self，就是为了和parent和top一致

窗口位置与像素比

window对象的位置可以通过不同的属性和方法来确定，浏览器提供了screenLeft和screenTop属性，用于表示窗口相对于屏幕左侧和顶部的位置，返回值的单位是CSS像素

window.addEventListener('resize',()=>console.log(window.screenLeft,window.screenTop))

可以使用moveTO()和moveBy()移动窗口。这两个方法都接受两个参数；
moveTO()：接受移动到新位置的绝对坐标
moveBy(): 接受相对当前位置在两个方向上移动的像素。

// 把窗口移动到左上角
window.moveTo(0,0);

// 把窗口向下移动100像素
window.moveBy(0,100);

以浏览器而定，以上可能被部分或全部禁用

窗口大小

所有现代浏览器都支持4个属性：
innerWidth: 返回浏览器视口宽度（不包含浏览器边框和工具栏）
innerHigth: 返回浏览器视口高度（不包含浏览器边框和工具栏）
outerWidth、outerHeight: 返回浏览器窗口自身的大小（不管是在window还是在iframe中使用）

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

            }

这里先将pageWidth和pageHeight的值设置为window.innerWidth、window.innerHeight。然后检查pageWidth是不是一个数值，如果不是则通过document.compatMode来检查页面是否处于标准模式。

可以使用resizeTo()和resizeBy()方法调整窗口大小。这两个方法都接受两个参数，resizeTo()接收新的宽度和高度，而resizeBy()接受宽度和高度要缩放多少.

// 缩放到100*100
window.resizeTo(100,100)

// 缩放到200*150
window.resizeBy(100,50)

// 缩放到300*300
window.resizeTo(300,300)

与移动窗口的方法用于，缩放窗口的方法可能会被浏览器禁用,而且有些浏览器默认是禁用的。同样，缩放窗口只能应用到最上层的window对象

视口位置

浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限的视口中查看文档。度量文档相对于视口滚动距离的属性有两对。返回相等的值：

• window.pageXoffset / window.scrollX;
• window.pageYoffset / window.scrollY;

console.log(window.scrollY===window.pageYOffset); // true
console.log(window.scrollX===window.pageXOffset); //true

可以使用scroll()、scrollTO()和scrollBy()方法滚动页面。这三个方法都接受表示相对视口距离的x和y坐标,这两个参数在前两个方法中表示要滚动到的坐标，在最后一个方法表示在当前位置上滚动的距离

// 相当于当前视口向下滚动100px
window.scrollBy(0,100)

// 相对于当前视口向左滚动20px
window.scrollBy(20,0)

// 滚动到左上角
window.scrollTo(0,0)

这几个方法也接受一个ScrollToOptions字典，除了提供偏移值，还可以通过behavior属性告诉浏览器是否平滑滑动。

window.scrollTo({
    left:0,
    top:400,
    behavior:"auto"
});
window.scrollBy({
    left:0,
    top:400,
    behavior:"smooth"
});

导航与打开窗口

window.open()方法可以用于导航到指定URL，也可以用于打开新浏览器窗口。

这个方法接受四个参数：要加载的URL、目标窗口、特性字符串、表示新窗口在浏览器历史记录中是否替代当前加载页面的bool值。通常调用这个方法时只传入前三个参数，最后一个参数只有在不打开新窗口时才使用

//<a href="http://yihen.vin.ink" target="topFrame"></a> 相同
window.open('http://yihen.vin.ink','topFrame') 

执行这段代码的结果就像是点击了上面的a元素，如果有一个窗口名叫topFrame，则这个窗口打开这个URL，否则就新开一个窗口并将其命名为topFrame。

第二个参数也可以是有些特殊的窗口名：_self,_blank,_parent,_top

弹出窗口

如果window.open()的第二个参数不是已有的窗口，则会打开一个新窗口或标签页。第三个参数——特性字符串，用于指定新窗口的配置。如果没有传第三个参数，则新窗口（或标签页）会带有所有默认的浏览器特性（工具栏，地址栏，状态栏都是默认配置）。如果打开的不是新窗口，会忽略第三个参数。

设置	值	说明
fullscreen	“yes” or “no”	表示新窗口是否最大化。仅IE支持
height	数值	新窗口的高度，值不能小于100
width	数值	新窗口的宽度，值不能小于100，经测试height与width要一起使用才有效果
left	数值	新窗口x轴坐标。这个值不能是负数
top	数值	新窗口x轴坐标。这个值不能是负数
location	yes of no	表示是否显示地址栏。不同浏览器的默认值也是不一样的。在设置为no时，地址栏可能隐藏或禁用（取决于浏览器）
Menubaer	yes or no	表示是否显示菜单栏。默认为no
resizable	yes or no	表示是否可以拖动改变新窗口大小，默认为no
scrollbars	yes or no	表示是否可以在内容过长时滚动，默认为no
status	yes or no	表示是否显示状态栏，不同浏览器的默认值不同
toolbar	yes or no	表示是否显示工具栏，默认为no

设置这些需要以逗号分隔的名值对形式出现，其中名值对以等号连接，（特性字符串不能包含空格）

window.open("http://www.baidu.com/",
            'wroxWindow',
            'height=400,width=200,top=10.left=10,resizable=yes')

这行代码会打开一个可缩放的新窗口，等下为400px*400px,位于屏幕左边10px，顶部10px的位置

跟使用任何window对象一样，可以使用这个对象操作新打开的窗口

let wroxWindow=window.open('http://www.baidu.com/',
            'wroxWindow',
            'height=400,width=200,top=10.left=10,resizable=yes')
//缩放
wroxWindow.resizeTo(500,500);

// 移动
wroxWin.moveTo(200,200);

// 关闭
wroxWin.close();

这个方法只能用于控制window.open()创建的弹出窗口。关闭窗口后，窗口的虽然还在，但只能用于检查closed属性了：

wroxWindow.close()
alert(wroxWindow.closed());//ture

新创建窗口的window对象有一个属性opener，指向打开它的窗口。这个属性只在弹出窗口的最上层window对象有定义，是指向调用window.open()打开它的窗口或窗格的指针。例如

let yihen=window.open('http://www.baidu.com/','yihen');
console.log(yihen.opener===window);//true;