# 浏览器内置对象

作者: 多叉树；转载须注明出处

# 什么是浏览器内置对象？

在前端开发中，我们总是会和浏览器打交道，其中很多对象都是浏览器环境给我们提供的，我们将浏览器提供给我们可以操作的接口称为浏览器内置对象，也被叫做浏览器对象模型(BOM - Browser Object Model)

事实上，很多重要的功能，比如监听浏览器滚动条滚动，浏览器窗口大小变化都和BOM有关

# Window 介绍

Window 对象代表的就是当前所处的窗口，此对象提供了一些列属性和方法方便我们通过js与浏览器进行交互。

# 全局变量

除了内置的属性和变量外，我们平时在方法外部定义的全局变量，也会归属到window下

var varA = 10;
// 输出true
console.log(window.hasOwnProperty('varA'))
// 输出为true
console.log(window.varA == varA);

既然全局变量会被挂在到Window对象上，也就是同一个窗口（浏览器页面中）可以共享全局变量；由此，我们可以得出，同意页面内加载的所有的js脚本都可以共享全局变量。也就是全局变量的作用域可以跨越多个js文件。

我们用要给例子证明这一点

在工程里创建一个文件 a.js
```
var varA = 1;
```
在同一个工程里创建另一个文件 b.js
```
varA++
```

编写HTML文件，先后应用a.js、b.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>abhtml</title>
</head>
<body>

    <script src="./js/a.js"></script>
    <script src="./js/b.js"></script>
    
    <script>

        console.log(varA);

    </script>

</body>
</html>

通过运行结构，我们既可以看出，全局变量的作用域是可以跨多个文件的

# Window常用属性

Window 比较常用的一些对象属性

document：文档对象，是整个HTML的DOM结构在JS当中的映射对象，通过它获取增、删、查、改DOM节点以及他们的属性
navigator：浏览器的 navigator 对象，该对象提供了有关用户的浏览器、操作系统等信息。
location：指向当前页面的 URL
history：管理浏览器历史记录的对象，它提供了一些方法和属性，可以用来查询和修改浏览器的历史记录
screen：指向屏幕对象，该对象提供了有关屏幕的大小、颜色深度等信息

Window 比较常用的窗口相关的属性

innerHeight 浏览器窗口内容区域的高度(包含滚动条)
innserWidth 浏览器窗口内容区域的宽度(包含滚动条)
outerHeight 浏览器窗口的外部高度(包括浏览器的边框)
outerWidth 浏览器窗口的外部宽度(包括浏览器的边框)
scrollY 属性表示垂直方向已滚动的像素值

PS: 获得不包含滚动条的窗口宽度，要用 document.documentElement.clientWith

# Window常用函数

window 也有很多我们平时常用的函数

alert()：弹出一个警告框。
confirm()：弹出一个确认框。
prompt()：弹出一个输入框。
open()：打开一个新的窗口或标签页。
close()：关闭当前窗口或标签页。
scroll()：滚动当前窗口。
print()：打印当前文档。
setInterval()：定时器
setTimeout()：延时器

是不是很熟悉? 我们之前学的很多内置函数其实都属于Window对象，我们可以写个程序验证下

console.log(window.setInterval = setInterval); // true

# `alter()` 函数

alter 是一个弹出框

Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>alert</title>
</head>
<body>
    
    <script>
        alert('我是弹出框');
    </script>
</body>
</html>

# `confirm()` 函数

confirm() 函数是一个用户可选对话框，用户可以选择确定或者取消，它接收一个布尔类型的返回值。

举例

Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>confirm</title>
</head>
<body>
    <script>
        if(window.confirm('你想打印HelloWorld吗')) {
            console.log('Hello World');
        }
    </script>
</body>
</html>

# `prompt()` 函数

prompt()弹出框会自带一个文本框，用户可以输入内容，通过prompt() 函数的返回值，就可以接收这个收入内容，当然，用户也可以点击取消按钮，取消输入

prompt() 函数可以传两个参数，第一个作为文本提示或问题显示给用户，第二个参数时输入框的默认值，可以传

举例

Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="input"></h1>
   <script>
        var input = window.prompt('吃了吗您?', '吃了');
        console.log(input);

        if(input) {
            var doc = document.getElementById('input');
            doc.innerText = input;
        }
      
   </script> 
</body>
</html>

另外的一些函数，我们有的之前介绍过，想 setTimeout , setInterval。还有一些我们这里没有给出例子，因为作者比较懒，大家自行百度吧。

# Window常用事件

# resize

改变窗口大小就会触发resize

使用方式 window.onresize或window.addEventListner('resize');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>resize事件</title>
</head>
<body>
    <script>
        // 监听窗口改变事件
        window.onresize = function() {
            console.log('clientWith', document.documentElement.clientWidth, "clientHeight:",document.documentElement.clientHeight)
        }
    </script>
</body>
</html>

# scroll 事件

窗口滚动条被拖动之后，就会被触发

使用方式window.onscroll或window.addEventListner(scroll')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scroll事件</title>
    <style>
        body {
            height: 5000px;
        }
    </style>
</head>
<body>
    <script>
        window.onscroll = function() {
            console.log('window.scrollY', window.scrollY);
        }
    </script>
</body>
</html>

相似属性doucument.documentElement.scrollTop

doucument.documentElement.scrollTop 和 window.scrollY 数值上相等，只是后者时只读的，前者可读写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            height: 5000px;
        }
    </style>
</head>
<body>
    <script>
        console.log(window.scrollY);
        console.log(document.documentElement.scrollTop);
    </script>
</body>
</html>

# `navigator` 对象

该对象提供了浏览器信息和操作系统的信息。我们简单列一下 navigator 对象的属性

属性	意义
appName	浏览器名称
appVersion	浏览器版本
userAgent	浏览器的用户代理信息
platform	用户操作系统
vendor	浏览器厂商

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigator对象</title>
</head>
<body>
    <script>
        console.log(navigator.appName);
        console.log(navigator.appVersion);
        console.log(navigator.userAgent);
        console.log(navigator.platform);
        console.log(navigator.appCodeName);
        console.log(navigator.vendor);

        
    </script>
</body>
</html>

# `history` 对象

此对象允许我们通过它操作浏览器历史记录。其中比较重要的功能就是回退

history.back(); // 等同于点击浏览器的回退按钮
history.go(-1); // 等同于history.back()

回退功能举个例子

编写两张网页： temp.html 、 temp1.html

规则

点击temp.html 的按钮可以跳转到temp1.html
点击temp1.html 的按钮可以回退到temp.html

temp.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>temp1</title>
</head>
<body>
    <h1>temp1页面</h1>
    <a href="./temp2.html">跳转到temp2</a>
</body>
</html>

temp2.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>temp2</h1>
    <button id="btn">回退</button>
    <a href="javascript:history.back()">回退</a>

    <script>
        btn.onclick = function(e) {
            history.back();
        }
    </script>
</body>
</html>