作为开发人员，你需要知道的浏览器知识-烟雨网

theme: fancy

前言

作为前端开发人员，浏览器是我们接触最多的工具了。浏览器自带的功能有很多，浏览器最基本的作用就是浏览网页了，对开发人员而言，还可以使用浏览器来调试代码，查看网页加载过程，获取网页请求。总之，浏览器是一个很重要的工具。

那么，我们对浏览器的原生知识又了解多少呢？这里我收集并整理了一些浏览器的原生知识，关于这些浏览器知识都基于react项目以及HTML页面做了相关实操测试，所以大家可以边看边操作，这样效果会更佳。

浏览器的可视窗口大小

window.innerWidth和window.innerHeight可以获取浏览器的可视窗口大小，这个属性在项目中经常能被使用到，所以可以重点关注。下面是我在React项目中简单使用了该属性。

import React from "react";
function App() {
  console.log('浏览器可视宽度 : ', window.innerWidth, innerWidth);
  console.log('浏览器可视高度 : ', window.innerHeight, innerHeight)
  return (
    <div className="App"></div>
  );
}
export default App;

浏览器后台打印如下：

浏览器的常见事件

浏览器有很多事件，比如加载事件，滚动事件等，也是十分常见的。

resize 尺寸改变事件

resize的运用场景就太多了。最基本的就是当浏览器页面可视窗口尺寸改变的时候，就会触发。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>尺寸改变事件</title>
</head>
<body>
  <script>
    window.onresize = function () {
       console.log('尺寸改变了')
     }
  </script>
</body>
</html>

load 加载事件

当我们把JS代码写在head标签内的时候, 并且操作了页面元素，这时候可以加上一个window.onload事件

当页面中所有外部资源(包括HTML, CSS, JS, 图片, 音视频等) 全部加载完毕后触发。但是我们需要注意，这种只能绑定一个事件处理函数。如果我们写了两个事件处理函数, 那么只会执行后面一个。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>加载事件</title>
</head>
<body>
  <script>
    window.onload = function () {
      console.log('页面全部加载完毕了')
    }
  </script>
</body>
</html>

后台打印如下：

scroll 滚动事件

顾名思义，scroll的中文意思是滚动。当浏览器页面的滚动条滚动的时候可以触发该事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>滚动事件</title>
</head>
<body>
  <script>
     window.onscroll = function () {
       let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
       console.log(scrollTop)
     }
  </script>
</body>
</html>

浏览器滚动

scrollTo() 方法可把内容滚动到指定的坐标。可能这样不太直观，直接看例子吧，相关代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      width: 2000px;
      height: 2000px;
    }
    #btn {
      position: fixed;
      right: 100px;
      bottom: 100px;
    }
  </style>
</head>
<body>
  <button id="btn">滚动</button>
  <script>
    btn.onclick = function () {
      // 直接传递数字
      // window.scrollTo(300, 1600)
 
      // 传递对象
      // window.scrollTo({
      //   top: 200,
      //   left: 900,
      //   behavior: 'smooth'
      // })
    }
  </script>
</body>
</html>

来介绍一下这段代码吧：在浏览器上固定一个按钮，设置点击事件，运用scrollTo功能。第一种在点击来按钮之后，就会将滚动条滚动到指定位置；第二种同理，只不过它是以定位方式来滚动的，并加入了滚动的方式behavior：'smooth'。

注意滚动条的变化，在点击之后，滚动条发生了位置上的移动。这就是scrollTo()应用后的效果。

这里顺带再提一下另一个关于浏览器滚动的属性吧，通过document.documentElement.scrollTop或者document.body.scrollTop可以获取到浏览器滚动的尺寸。

浏览器弹出层

这里简单介绍一下浏览器弹出层这个概念，被使用的频率虽然少，但是还是需要了解一下的。
window.alert() 提示框 ，window.confirm() 确认框 ，window.prompt() 输入框 这三种都是属于浏览器弹出层。

用法如下所示：

import React from "react";
function App() {
  let res = window.confirm('hello world')
  console.log(res) // 返回bool值
  return (
    <div className="App"></div>
  );
}
export default App;

其他几种弹出层用法一致。