JavaScript BOM
BOM全称Browser Object Model，翻译为浏览器对象模型。通过BOM，我们可以用JS获取浏览器或系统的一些基本信息，也可以操作浏览器界面。由于BOM没有正式的标准，所以主流浏览器在实现上会有所不同。
window对象
window对象是一个全局对象，在任何位置都可能访问到它，我们常用的document也是它的属性。
我们可以在控制台打印一下window对象，查看一下window对象的属性和方法。
console.log(window);//Window{...}
因为全局对象属性和方法特别多，这里就不再展示了，有兴趣的同学可以自己打印一下。全局对象可以在任意位置访问，使用全局对象属性和方法也可以省略window。
window.alert('弹出内容');
alert('弹出内容');
console.log(window.document);
console.log(document);
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
浏览器宽高
可以通过window对象获取窗口尺寸
-
window.innerWidth/(innerHeight)（窗口内部宽高 含滚动条） -
window.outerWidth/(outerHeight) （窗口外部宽高 包含工具栏 滚动条） -
screen.width/(height) （返回屏幕宽高） -
document.body.clientWidth/(clientHeight) （文档所在窗口的宽高）
console.log(window.innerWidth);
console.log(window.outerWidth);
console.log(screen.Width);
console.log(document.body.clientWidth);
IE8以下使用document.documentElement.clientHeight和document.documentElement.clientWidth获取，覆盖所有浏览器的实用方法。
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
全局属性和方法
我们在全局使用var关键字定义的属性和方法均属于window对象，可以通过window对象调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var name = 'Cherry';
console(window.name);//Cherry
function greet(){
console.log(this.name);
}
window.greet();//Cherry
</script>
</body>
</html>
如果定义的全局属性和方法是window已经有的属性和方法，会覆盖其原有属性和方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function alert(){
console.log('现在的alert方法');
}
alert();
</script>
</body>
</html>
全局变量不能通过delete删除，但是全局属性可以。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var name = "Cherry";
delete name;
console.log(window.name);//undefined
console.log(name);//报错
</script>
</body>
</html>
其它window方法
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
