前言
作为前端开发人员,浏览器是我们接触最多的工具了。浏览器自带的功能有很多,浏览器最基本的作用就是浏览网页了,对开发人员而言,还可以使用浏览器来调试代码,查看网页加载过程,获取网页请求。总之,浏览器是一个很重要的工具。
那么,我们对浏览器的原生属性和知识又了解多少呢?这里我收集并整理了一些浏览器的原生知识,关于这些浏览器知识都基于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;
其他几种弹出层用法一致。
浏览器知识
浏览器跨域解决
- nginx 反向代理(公司工作时的常用方式)
- cors(比较经典的方式)
- jsonp
- 中间件代理
- iframe(有很多种,这里未进行细分)
- postMessage()
- websocket
浏览器调试
关于浏览器的调试,我们可以打开浏览器的后台查看控制台属性。
经常使用到的 console.log() 输出就是在Console
下查看的。
Network
查看一些接口信息,依靠它来查看接口字段也是不错的选择。
Application
查看缓存,比如项目中的session
,cookie
等等。
以上这些都是经常能使用到的属性。
总结
以上就是一些关于浏览器基本知识的总结了,关于浏览器我们还有很多需要了解的内容,比如浏览器存储,这也是非常重要的。浏览器作为平时开发中的常用工具,它的作用是不可忽视的,因此,对浏览器知识掌握地越多,就越有助于我们的日常开发。
最后
为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。
有需要的小伙伴,可以点击下方卡片领取,无偿分享