JS-BOM

BOM的核心是window对象，表示浏览器的实例。window对象在浏览器中又两重身份，一个是ECMAScript中的Global对象，另一个就是浏览器窗口的JS接口。

通过var声明的所有全局变量和函数都会变成window对象的属性和方法。

使用let或const替代var，则不会把变量添加给全局对象。

窗口关系

top对象始终指向最上层窗口，即浏览器本身。

而parent对象则始终指向当前窗口的父窗口。

最上层的window如果不是window.open()打开的，那么其name属性就不会包含值。

窗口大小

浏览器都支持4个属性：innerWidth、innerHerght、outerWidth和outerHeight。

outerWidth和outerHeight返回浏览器窗口自身的大小。

innerWidth和innerHeight返回浏览器窗口中页面视口的大小。

let pageWidth = window.innerWidth;
let 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.pageXoffset/window.scrollX和window.pageYoffset/window.scrollY

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

这几个方法都接收一个ScrollToOptions字典，还可以通过behavior属性告诉浏览器是否平滑滚动

Window.scrollTo({
	left:100,
	top:100,
	behavior:'auto'
});

window.scrollTo({
	left:100,
	top:100,
	behavior:'smooth'
})

导航于打开新窗口

Window.open()方法可以用于导航到指定URL，也可以用于打开新浏览器窗口。这个方法接收4个参数：要加载到URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面到布尔值。

window.open("http://www.wrox.com",target="topFrame")

第二个参数是一个已经存在的窗口或窗格(frame)的名字。则会在对应的窗口或窗格打开URL。

特性字符串：

window.open("http://www.wrox.com",target="topFrame","height=400,width=400,top=10,left=10,resizable=yes")

用于指定新窗口的配置。

设置 值 说明
fullscreen “yes”或”no” 表示新窗口是否最大化。仅限IE
height 数值 新窗口高度。这个值不能小于100
left 数值 新窗口的x坐标，不能为负
location “yes”或“no” 表示是否显示地址栏。设置为no时，地址栏可能隐藏或禁用。
Menubar “yes”或”no” 表示是否显示菜单栏。默认为“no”
resizable “yes”或“no” 表示是否可以拖动改变新窗口大小。默认为“no”
scrollbars “yes”或“no” 表示是否可以在内容过长时滚动。默认为“no”
status “yes”或“no” 表示是否显示状态栏。不同浏览器的默认值不一样
toolbar “yes”或“no” 表示是否显示工具栏。默认为“no”
top 数值 新窗口的y轴坐标。值不能为负

window.close()方法关闭窗口