文中已经参与「 . 」
序言
做为前端工程师工作人员，电脑浏览器是我们接触数最多的辅助工具。电脑浏览器带有的作用有许多，电脑浏览器最基本的的作用是打开网页了，对开发商来讲，还可以使用电脑浏览器来调试代码，查询网页加载全过程，获得网页页面要求。总而言之，电脑浏览器是一个很重要的专用工具。
那样，对于浏览器原生态特性和专业知识又了解多少呢？在这里我搜集并整理了一些浏览器原生态专业知识，有关这种电脑浏览器专业知识都是基于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, 照片, 音频视频等) 所有载入完成后开启。但我们应注意，这类只有关联一个事件处理函数。假如我们写2个事件处理函数, 那样只能实行后边一个。
<!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>
来介绍一下这一段编码吧：用浏览器上固定一个按键，设定js点击事件，应用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;
别的几类弹出层使用方法一致。
电脑浏览器专业知识
电脑浏览器跨域请求处理
电脑浏览器调节
有关浏览器调节，我们能打开网页的后台管理查询控制面板特性。
频繁使用过的 console.log() 导出便是在Console下查询的。
Network查询一些插口信息内容，借助它来查看插口字段名都是不错的选择。
Application查询缓存文件，例如项目中的session，cookie这些。
之上这都是总是能应用过的特性。
汇总
以上就是关于一些关于电脑浏览器基础知识总结了，有关电脑浏览器大家还有一些要了解内容，例如电脑浏览器存放，这也是很重要的。电脑浏览器做为平常开发设计里的实用工具，它的功能是不可忽视，因而，对电脑浏览器理论水平地越大，就会越有助于我们的日常开发设计。
声明：本文仅供个人学习使用，来源于互联网，本文有改动，本文遵循[BY-NC-SA]协议, 如有侵犯您的权益，请联系本站，本站将在第一时间删除。谢谢你
原文地址：电脑浏览器原生态特性和专业知识
