JavaScript window对象

2021-10-23 本文已影响0人微语博客

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() - 调整当前窗口的尺寸